前言
相信对于很多vue初学者来说,看到组件通信这块的时候,跟我一样懵逼,完全摸不清啥是啥,搞到最后,连父子组件都区分不清了。
下面这篇文章就是我对vue父子组件通信的研究,写的比较啰嗦,但是,对于一个初学者来说,不啰嗦一点,下次忘记了在看,可能又看不懂了。
一、prop、ref、emit的区别
我这边对以上三点的区别做一些我自己理解上的区别,用到的语言可能不专业,但是比较通俗易懂。
prop:父组件向子组件传值,着重于传递数据,不能调用子组件的方法
ref:父组件向子组件传值,主要调用子组件的属性方法,不擅长数据传递
emit:子组件向父组件传值
二、具体使用方法
1.prop
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
2.ref
3.emit
$emit来触发一个事件,第一个参数:事件名称;第二个参数:可携带的一些参数。
在组件的父级可以通过事件绑定的方式,来接收触发事件
vm.$emit( event, arg )---event:事件名,arg:参数
总结
总的来说,组件的通信方法就以上几点,看懂的话,写项目应该就没什么大问题了