Vue-Cli—04.父子组件传值祖孙组件传值兄弟组件传值

Posted 2023-03-11

参考技术A

父组件向子组件传值，可以通过绑定属性传值；子组件通过props接收父组件传值。
父组件：

子组件：

子组件通过$emit触发一个自定义事件，将更新的数据传给父组件。
子组件：

父组件：

首先祖先给子孙后代传值也是可以用props传递，一层层传递，如果嵌套了五六层，这种方法就显得很繁琐。
所以就用到了provide(提供)和inject(注入)。这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。祖先组件通过provide添加依赖数据，它里面定义的数据，后代组件可以通过inject选择性注入并直接使用。
注意： 后代组件通过inject注入祖级组件中的依赖数据，跟props一样，接收的数据是只读的，不能修改。

祖先组件：

后代组件：

在Vue的原型对象上，添加一个 $bus属性 ，该属性的的属性值是一个Vue实例。Vue的所有实例，都将共用同一个$bus。这个$bus属性，称之为：中央事件总线。
vm.$emit( eventName, […args] )： 触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on( event, callback )： 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$once( event, callback )： 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off( [event, callback] )： 移除自定义事件监听器。

main.js文件：

兄弟A鸽子组件：
点击鸽子组件中的‘修改乌鸦数据’按钮，可以修改乌鸦组件页面的数据。

兄弟B乌鸦组件：