1.App.vue 传 data 到 MyList.vue, 
先写数据。
通过组件的事件绑定传值。

App.vue

<MyList :todos="todos"></MyList>
<MyItem :todos="todos"></MyItem>
<MyFooter :todos="todos"></MyFooter>

<script>
import MyFooter from "./components/MyFooter.vue";
import MyHeader from "./components/MyHeader.vue";
import MyItem from "./components/MyItem.vue";
import MyList from "./components/MyList.vue";

export default {
  name: "App",
  components: {
    MyFooter,
    MyHeader,
    MyItem,
    MyList,
  },

  data() {
    //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
    return {
      todos: [
        { id: 1, name: "wulei1", age: 30 },
        { id: 2, name: "wulei2", age: 50 },
        { id: 3, name: "wulei3", age: 60 },
        { id: 4, name: "wulei4", age: 40 },
      ],
    };
  },
};
</script>

在 MyList.vue 中，接收运用数据。

接收数据 props:['todos']
然后在运用数据。


2.MyList.vue 传到 MyItem.vue

MyList.vue

把"litodos in todos"  中的 litodos  绑定事件 :todo = "litodos" 

<MyItem v-for="litodos in todos" :key="litodos.id" :todo="litodos"  />


MyItem.vue

接收数据 props:['todos']
然后在运用数据。