Vue组件间通信六种方式（完整版）

需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。我们先来看个用 ref来访问组件的例子：

// component-a 子组件 
export default { 
  data () { 
    return { 
      title: 'Vue.js' 
    } 
  }, 
  methods: { 
    sayHello () { 
      window.alert('Hello'); 
    } 
  } 
} 

// 父组件 
<template> 
  <component-a ref="comA"></component-a> 
</template> 
<script> 
  export default { 
    mounted () { 
      const comA = this.$refs.comA; 
      console.log(comA.title);  // Vue.js 
      comA.sayHello();  // 弹窗 
    } 
  } 
</script> 

不过，这两种方法的弊端是，无法在跨级或兄弟间通信。

// parent.vue 
<component-a></component-a> 
<component-b></component-b> 
<component-b></component-b> 

我们想在 component-a 中，访问到引用它的页面中(这里就是 parent.vue)的两个 component-b 组件，那这种情况下，就得配置额外的插件或工具了，比如 Vuex 和 Bus 的解决方案。

总结

常见使用场景可以分为三类：

• 父子通信：

父向子传递数据是通过 props，子向父是通过 events($emit);通过父链 / 子链也可以通信($parent / $children);ref 也可以访问组件实例;provide / inject API;$attrs/$listeners

• 兄弟通信：

Bus;Vuex

• 跨级通信：

Bus;Vuex;provide / inject API、$attrs/$listeners

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!