Vue天禹

  1. 主页
  2. 文档
  3. Vue天禹
  4. App.vue和MyList之间传值

App.vue和MyList之间传值

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>
这篇文章对您有用吗?

我们要如何帮助您?