几种常见的通信方式：
1、prop 属性
父组件通过绑定属性的方式，给子组件传值，同时子组件通过设置 props 来接收
<div id="app"> <child :content="msg"></child> </div> <script> let Child = Vue.extend({ template: '<h1>{{content}}</h1>', props: { content: { type: String, default: () => { return 'from child' } } } }) new Vue({ el: '#app', data: { msg: 'hello' }, components: { Child } }) </script>2、$emit
子组件通过调用 this.$emit(‘事件’，‘参数’) 给父组件通信，父组件通过监听 子组件的事件，来获取
<div id="app"> <v-button @parent="handleParent"></v-button> </div> <script> let vButton = Vue.extend({ template: '<button @click="handleClick"></button>', data: { tragger: 'hello vue' }, methods: { handleClick() { this.$emit('parent', this.tragger) } } }) new Vue({ el: '#app', data: { content: '' }, methods: { handleParent(val) { this.content = val } }, components: { vButton } }) </script>3、属性attrs 和 $listeners
4、EventBus （bus 总线）
思路就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据，事件监听都存储到这个变量上。这样就达到在组件间数据共享了，有点类似于 Vuex，但复杂的项目还是用 Vuex
子组件通过 EventBus.$emit() 向外触发事件，父组件通过EventBus.$on() 来监听该事件，变量保存在EventBus
5、Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 6、通过ref 属性
//父组件
<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { methods: { handleClick() { this.$refs.child.navigate(); }, }, } </script>//子组件
<template> <div>我是子组件</div> </template> <script> export default { methods: { navigate() { console.log('我是子组件的方法'); }, }, }; </script>