问题：
组件之间的通信无非就那种：兄弟组件间、父子组件间、爷孙（多层级间），兄弟组件之间通信我前面的文章已经讲过（点击此链接：
兄弟组件：(38条消息) 兄弟组件通信（vue-bus）（vue）_秃秃秃了的博客-CSDN博客/weixin_61285710/article/details/122467218?spm=1001..3001.5501父子组件通信：
(41条消息) 细聊组件通信（$children、$refs、$parent、$root）_秃秃秃了的博客-CSDN博客/weixin_61285710/article/details/122489718?spm=1001..3001.5501
再记录下父子组件和爷孙组件间的通信方式。
父子之间通信：
父传子：prop
1.父页面传属性值
msg和title就是我们需要向子组件传递的值
// 父页面注册使用的子组件<my-main msg="hello" :title="title"></my-main>data(){return{title: '名字'}}2.子组件接收
在子组件的props里定义相同字段的属性，可设置默认值，只要父组件调用子组件时传值了，子组件就可以直接在标签或者逻辑直接使用定义的这些属性了
<script>export default {props: {msg: {type: String // 定义类型default: '你好' // 定义默认值},title: {type: Stringdefault: '名称'},},}</script>
子传父：$emit
子传父主要传递方法出来，可以返回一个默认值，以便父组件可处理逻辑。
// 子组件某一个方法里，传递一个回调方法出去，并可以打包一些回调参数一并传递// 例如，在button按钮写的确认事件<button @click="save">确认</button>methods: {save(){// handleSvae就是父组件调用的方法名，2是回调参数this.$emit('handleSvae',2) }}父组件里接收方法：在父组件调用的子组件上定义@handleSave的方法，即调用成功
// 父组件调用的子组件,myDemo是在父组件调用方法使用的方法名<my-conn @handleSave="myDemo"> </my-conn>methods:{// 这个data就是回调参数 myDemo(data){console.log(data,'data的值为2')}}
多层级：
调用上一级或者上上级组件或实例：$parent、调用最顶级：$root、父组件调用子组件的方法:$children或$refs
vue还有一种常用的通信方式，父子以及多层级皆适用：
provide 和 inject
// 父组件注入方法<script>export default {// 父组件中返回要传给下级的数据provide () {return {reload: this.reload}},methods: {reload () {console.log('这是子组件要调用的方法')}}}</script>// 子组件取用<script>export default {inject: ['reload'],methods: {// 某某方法里 直接可调用xxFunction(){this.reload() }}}</script>
