App.vue 传值
<template>
<div>
<!-- 传送数据给MyList -->
<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
</div>
</template>
<script>
import Mylist from './components/MyList';
import Myhead from './components/MyHeader';
export default {
name:'',
components:[],
props:[],
data(){
return{
todos:[
{id:'001',title:'抽烟',done:true},
{id:'002',title:'喝酒',done:false},
{id:'003',title:'开车',done:true}
]
}
},
methods:{
}
}
</script>
<style>
</style>
MyList.vue 接收值
<template>
<ul class="todo-main">
<MyItem
v-for="todoObj in todos"
:key="todoObj.id"
:todo="todoObj"
:checkTodo="checkTodo"
:deleteTodo="deleteTodo"
/>
</ul>
</template>
<script>
import MyItem from './MyItem'
export default {
name:'MyList',
components:{MyItem},
//声明接收App传递过来的数据,其中todos是自己用的,checkTodo和deleteTodo是给子组件MyItem用的
props:['todos','checkTodo','deleteTodo']
}
</script>