</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
总结
以上所述是小编给大家带来的一文快速详解前端框架 Vue 最强大的功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
