9. 组件件传参--父子绑定传参、子父兄弟传参、ref父子通信 ---(1)

组件间传参

父子传参、子父传参、兄弟间传参、父子通信

1. 父子传参

父组件传参给子组件

用绑定的方式传参

<子组件标签名 :自定义属性名="父组件中的变量"></子组件标签名>

子组件中接收：

<script>
	export default {
		props:["父组件中自定义属性名"]
	}
</script>

props中的属性的用法和data中的变量的用法是完全一样的
区别：

1. props的属性值来自于外部传入
2. data中的变量值由自己定义

2. 子父传参

子组件传参给父组件

父组件接收方:
需要在引用的子组件上添加一个自定义事件，并绑定父组件中的一个处理函数。

 <子组件标签名 @自定义事件="父组件中的事件名"></子组件标签名>

<script>
	export default {
		methods: {
			父组件中的事件名(参数1,...){}
		}
	}
</script>

子组件发送方:
通过关键字$emit：

// 在需要的时候以下方式传参给父组件。比如放在方法中
$emit("父组件中的自定义事件",参数1,....)

3. 兄弟组件传参

一、 通过$emit、 $on

1. 定义一个全局公共变量

先要一个第三方的中介，得是new Vue对象用来保存事件，并关联到任何一个组件对象处理函数上
比如：

Vue.prototype.公共变量名 = new Vue();
// Vue.prototype.bus = new Vue();

2. 接收方组件 通过$on

加载完成后，向①中的公共变量名添加一个自定义事件，在事件上绑定一个处理函数
绑定:

// 可以放在created里面
this.公共变量名.$on("自定义事件",this.事件名.bind(this));
// this.bus.$on("自定义事件",this.事件名.bind(this));

methods:{
	事件名(参数){
	 //....
	}
}

this.公共变量名.$on("自定义事件",(参数)=>{
	//.....
});

3. 发送方 $emit

在处理函数中，找到公共的变量名，用$emit()触发提前定义在公共变量名上绑定好的事件，并传参

this.公共变量名.$emit("自定义事件名",参数1)
//this.bus.$emit("自定义事件",参数1)

二、先传给父组件，再通过父组件传给子组件

三、使用vuex进行全局传参

4. 父子间通信

打通父子之间所有数据和方法的共享方法

ref被用来给元素或子组件注册引用的信息，引用信息将会注册在父组件的$ref对象上。(如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例)

父模板：

<子组件 ref="子组件名称"></子组件>
// ref也可以定义在DOM元素上。

父组件访问子组件
父组件中：
访问数据： this.$refs.子组件名称.子数据
使用方法: this.$refs.子组件名称.方法名()

子访问父组件:
访问数据: this.$parent.父数据
使用方法: this.$parent.方法名()