Vue中的组件通信 ---复习

1. 父子组件LY
通过自定义属性和props来实现父子组件间的通信

// 1. 创建父子关系的组件
// 2. 父组件中使用子组件时添加自定义属性

<子组件名 :parentdata="传递的变量名"></子组件名>

// 3. 子组件中用props接收参数

export default{
	props:['parentdata']
}

// 4. 子组件中使用父组件传递过来的变量
直接使用变量名

代码示例LY
父组件中的代码

子组件中的代码

2.子父组件LY
通过自定义事件和$emit实现子传父
// 1. 创建父子关系的组件
// 2. 在父组件使用子组件的时候,传递一个自定义的函数

<子组件名 @自定义事件名="事件函数"></子组件名>

// 3. 子组件中，button中加点击事件主动触发父组件传递的函数

methods:{
	点击事件函数（）{
		// $emit用来触发父组件传递的事件
		this.$emit('父组件传递的自定义事件名' , 传递给父组件的数据)
	}
}

// 4. 父组件中，自定义变量，在传递的自定义事件中接收子组件传递的数据，赋值给自定义变量，就可在页面中渲染

代码示例LY
父组件中的代码

子组件中的代码

3. 非父子组件（兄弟组件、跨级组件）LY
eventbus
// 1. 公用容器 main.js
Vue.prototype.bus= new Vue();
new Vue()…//公用容器设置需在示例化对象之前
// 2. 数据发送
this.bus.KaTeX parse error: Expected '}', got 'EOF' at end of input: …(){ this.bus.on(‘事件名’ , (形参)=>{
…
})
}

代码示例LY
main.js

创建兄弟组件,big和small为兄弟组件

big组件(big组件传递数据,通过公用组件中的$emit)

small组件接收数据 (通过公用组件中的$on)