vue组件之间的传值

vue组件通信（父传子、子传父、兄弟组件通信）

1、父传子

在父组件的子组件标签上绑定一个自定义属性，给这个属性挂载需要传递的值，在子组件中通过props接收传递过来的值，props即可以是一个对象也可以是一个数组。

注意:父传子是单向传递，在子组件中修改传递过来的参数是无效的

父组件

<heads :data="list" />
// 比如这是我们注册好的子组件标签
<script>
	export default {
		data(){
			return {
				list:["数据1","数据2","数据3",]
			}
		}
	}
</script>

子组件

<script>
	export default {
		props: {
			list: {		// 接收的数据名必须跟父组件中传递的自定义属性名一致
				type: Array,		// 规定数据的类型
				default: []			// 如果父组件没有传参，使用默认数据
			},
		},
	}
</script>

2、子传父

在父组件的子组件标签上绑定一个自定义事件，给这个事件挂载需要传递的方法，在子组件使用this.$emit(‘自定义事件名’,传递的参数),在父组件中触发挂载的这个事件，有一个参数，就是子组件传递过来的数据。
父组件

<heads @change="change" /> <-- 子组件 -->
// 如我们自定义事件名叫 change 
// 值为我们的change事件
<script>
	export default {
		methods:{
			change(val){
				console.log(val) // val就是我们传递过来的数据
			}
		}
	}
</script>

子组件

<button @click="btn"></button>
<script>
	export default {
		data(){
			return {
				list:"数据",		
				}
	},
		methods:{
			btn(){
				this.$emit("change",this.list);
				// 第一个参数是我们在子组件标签上绑定的自定义事件名
				// 第二个是我们要传递的数据
			}
		}
	}
</script>

3、兄弟组件通信

在全局的main.js中初始化一个$bus

window.$bus=new Vue();

在发送的一方使用

$bus.$emit("aMsg", '数据');

<template>
   <button @click="sendMsg()">-</button>
</template>

<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", '来自A页面的消息');
   }
 }
}; 
</script>

在接收的一方使用

$bus.$on("事件名",callback)

<template>
 <p>{{msg}}</p>
</template>

<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // A发送来的消息
     this.msg = msg;
   });
 }
};
</script>