组件通信、传值（父子、爷孙、多层级）（prop、$emit、provide、inject）（vue）

问题：

组件之间的通信无非就那种：兄弟组件间、父子组件间、爷孙（多层级间），兄弟组件之间通信我前面的文章已经讲过（点击此链接：

兄弟组件：(38条消息) 兄弟组件通信（vue-bus）（vue）_秃秃秃了的博客-CSDN博客https://blog.csdn.net/weixin_61285710/article/details/122467218?spm=1001.2014.3001.5501父子组件通信：

(41条消息) 细聊组件通信（$children、$refs、$parent、$root）_秃秃秃了的博客-CSDN博客https://blog.csdn.net/weixin_61285710/article/details/122489718?spm=1001.2014.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: String
        default: '名称'
    },
  },
}
</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>