vue组件之间的传参

我们在写组件时，不可避免的需要用到传参。我在这里说明一下我们一般用到最多的2中传参。

1、父传子

在父组件中的子组件标签上绑定一个自定义属性，这个自定义属性的值就是我们要传递的参数。

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

我们在子组件接收是使用props
props 可以是个对象，也可以是个数组。
当是个数组时，接收的数据没有限制
当是个对象时，接收的数据可以限制其类型，或设置一个默认的值…
我们使用的时候根使用data中的变量一样即可。
注意：父传子时，子组件不可改变传递的数据

<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、兄弟组件传递数据

我们的兄弟组件传值可以使用vuex来解决。所以我们用到的不多。
首先我们初始化一个全局的$bus
直接在跟目录下的main.js 初始化 $bus 。

window.$bus=new Vue();

在发送的一方使用

 $bus.$emit("aMsg", '数据');  
 // 我们页面A发送数据

在接收的一方使用

$bus.$on("事件名",callback)
// 我们页面B接收数据
$bus.$on("aMsg", (msg) => {
     // A发送来的消息
     // 我们的msg就是A发送过来的数据
   });