Vue-Cli—04.父子组件传值|祖孙组件传值|兄弟组件传值
父组件向子组件传值,可以通过绑定属性传值;子组件通过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乌鸦组件: