天下无坑

天下无坑


组件传值 props $emit $on $refs bus

skinparam backgroundColor #FCFCFC

父组件->子组件:Props (@eventName) 可获取返回值
父组件<-子组件:event($emit) 可父组件触发

父传子

  • props

子传父

  • Function (函数具体功能写在父组件,像callback) props中的Function类型,在子组件中被调用,并传递子组件的数据给父组件。
  • v-on (自定义事件) (函数具体功能写在父组件,像callback) 子组件用$emit触发的自定义事件,并传递子组件的数据给父组件。(子组件通常没有用$on监听该事件)

  • props中的 Function 与自定义事件的区别 > 自定义事件可在父组件中通过$refs 用 $emit 【主动】 触发 props中的 Function 由子组件 被动 执行,子组件可以根据Function(在父组件定义)的【返回值】进行下一步操作
    <font color=blue>使用选择: 需要根据父组件function的返回值用props,需要父组件触发用自定义事件</font>

兄弟爷孙等

  • $on &lt;span color=&quot;blue&quot;&gt;(函数具体功能写在组件内部)&lt;/span&gt; $on在组件内部定义一个自定义事件,及要执行的函数,兄弟爷父孙等可结合$refs,$emit触发它。

  • $refs 简单粗暴获得子组件的方法,事件,属性 dom引用,一般需要写在$netxTick()里 给组件一个ref属性值,然后调用他的方法或属性或自定义事件

  • bus 在main.js中创建全局的Vue实例作为事件总线,结合$on $emit 实现所有组件的自定义事件监听
&lt;mycomponent ref=&quot;myref&quot;&gt;&lt;/myomponent&gt;

&lt;script&gt;
//给组件一个ref属性,然后就可以执行他的方法
$netxTick(()=&gt;{
    this.$refs.myref.method();
})

&lt;/script&gt;

页面列表

ITEM_HTML