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

（编辑：湖南网）

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