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

 我来答
大沈他次苹0B
2022-06-11 · TA获得超过7330个赞
知道大有可为答主
回答量:3059
采纳率:100%
帮助的人:178万
展开全部

父组件向子组件传值,可以通过绑定属性传值;子组件通过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乌鸦组件:

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式