vue的学习笔记：子组件与父组件之间的相互传值

父组件向子组件传值

1. 在父组件的子组件上写相应的属性

<template>
	<div>
		<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

2. 在子组件中用props配置项进行接受

		//简单声明接收
		 props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		props:{
			name:String,
			age:Number,
			sex:String
		}

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}

子组件向父组件上进行传值（第一种方法）

1. 在父组件定义好的函数并通过props传递给子组件

	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<MyList :addTodo="addTodo"/>
			</div>
		</div>
	</div>

methods: {
			//添加一个todo
			addTodo(todoObj){
				this.todos.unshift(todoObj)
			},
		}

2. 在子组件上调用传过来的函数通过传参进而对父元素进行传值

子组件向父组件上进行传值（第二种方法）

1. 在子组件中触发自定义事件：this.$emit('自定义事件',数据)
2. 在父组件中的子组件上绑定自定义事件和回调函数

<father>
	<son @自定义事件名="回调函数名"/>
<father/>

注：解绑自定义事件this.$off('自定义事件名')
注：组件上也可以绑定原生DOM事件（例如click事件），但需要使用native修饰符。