vue 中父子组件通信（父子组件传参）

1、父子通信

父向子传参用 props，父组件绑定属性，子组件用props接受

父组件 v-bind 绑定属性

<children :propVal= 'msg'></children>

data(){
	return{
		msg:'父组件内容！！'
	}
}

子组件 props 接受

<p>{{propVal}}</p>

data(){
	return{}
},
props:['propVal ']

2、子父通信

子向父传参用 this.$emit ,父组件自定义一个函数接受

子组件 绑定事件

<div @click= 'toFather'>传递</div>

data(){
	return{
		msg:"子组件内容"
	}
}
methods:{
	toFather(){
		// this.$emit(自定义事件名,传递的内容)，向上触发机制，携带 事件名 + 参数
		// 自定义事件：给父组件内的子组件绑定的事件
		this.$emit("myClik",this.msg)
	}
	
}

父组件

<div class="father">
	<children @myClik= 'fun'></children >
</div>

methods:{
	fun(res){
		console.log(res)
	}
}

非父子组件通信用 event bus（事件总线），或者用 Vuex

Vuex 的基本使用