Vue父子组件中的传值 兄弟组件中的2种传值方式

父组件向子组件传值

1. 子组件在props中创建一个属性 用以接收父组件传过来的值
2. 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性
3. 把需要传给子组件的值赋给该属性

父->子 v-bind props

<div :msg="msg"></div>

子组件接收

props:["msg"]
// 使用
<div>{{msg}}</div>

props验证
props:{
	msg:{ // 接收字符串类型的参数 并且这个参数必须传入
		type:String,
		required:true
	}
}
props验证可以写也可以不写 type类型可以为Number Array Object String
这里还可以自定义验证器

props是单向绑定的 当父组件的属性变化时 将传导给子组件 但是不会反过来 这是为了防止子组件修改父组件的状态 所以不应该在子组件中修改props的值

子组件向父组件传值

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为 $emit 的第二个参数 该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件 并在子组件标签上绑定对自定义事件的监听

子->父 v-on $emit

// 子组件
<button @click="onClickChange"></button>
methods:{
	onClickChange(){
		this.$emit("clickChange","子组件向父组件传值",true)
	}
}
// 父组件 
<div v-on:clickChange="change"></div>
methods:{
	change(data1,data2){
		console.log(data1,data2)
	}
}

兄弟组件中的传值

1. 父组件中转

<div> // 父组件
	<p></p> // 兄弟组件1
	<p></p> // 兄弟组件2
</div>
// 组件1要向组件2传值 可以用$emit传给父组件 父组件使用v-bind传给兄弟组件2

2. bus中央事件总线
新建一个 Bus.js 文件

import Vue from 'Vue'
export default new Vue 

父组件组件代码

<div> // 父组件
	<p></p> // 兄弟组件1
	<p></p> // 兄弟组件2
</div>

兄弟组件1

<button @click=onClickChange>点击</button> // 点击按钮向兄弟组件2传值
// 代码页面:
import Bus from './Bus'
export default{
	data(){
		return{
			msg:'传值'
		}
	},
	methods:{
		onClickChange(){
			Bus.$emit("clickChange",this.msg,"兄弟组件1组件传值")
		}
	}
}

兄弟组件2

// 接收兄弟组件1传值
<p>{{msg1}}加上{{msg2}}</p>
impirt Bus form './Bus';
export default{
	data(){
		return{
			msg1:"",
			msg2:""
		}
	},
	created(){
		Bus.$on("clickChange",(val1,val2)=>{
			this.msg1 = val1
			this.msg2 = val2
		})
	}
}