vue学习，使用provide/inject通信

news2024/12/27 15:04:33

提示：组件的provide，可以被其内所有层级的组件，通过inject引用

文章目录

前言
一、通信组件
二、效果
三、参考文档
总结

前言

需求：使用provide/inject通信

一、通信组件

1、AA.vue

<template>
  <div class="test">
    <p>1级 provid</p>
    <p><BB /></p>
  </div>
</template>

<script>
import BB from './BB'
export default {
  name: 'AA',
  components:{BB},
  data () {
    return {
      title:'---测试provid和inject通讯',
      name:'张三'
    }
  },
  provide(){
    return {
      title:this.title,
      changeName(name){
        this.name = name;
        console.log(this.name)
      },
    }
  },
  created(){
    console.log(this.name,'1级')
  }
}
</script>

2、BB.vue

<template>
  <div class="test">
    <p>2级 inject  {{ title }}</p>
    <p><CC /></p>
  </div>
</template>

<script>
import CC from './CC'
export default {
  name: 'BB',
  components:{CC},
  inject:{
    title:{
      type:String,
      default:''
    },
    changeName:{
      type:Function,
      default:function(name){}
    }
  },
  data () {
    return {
    }
  },
  created(){
    this.changeName('李四')
  }
}
</script>

3、CC.vue

<template>
  <div class="test">
    <p>3级 inject  {{ title }}</p>
    <p><DD/></p>
  </div>
</template>

<script>
import DD from './DD'
export default {
  name: 'CC',
  components:{DD},
  inject:{
    title:{
      type:String,
      default:''
    },
    changeName:{
      type:Function,
      default:function(name){}
    }
  },
  data () {
    return {
    }
  },
  created(){
    this.changeName('王五')
  }
}
</script>

4、DD.vue

<template>
  <div class="test">
    <p>4级 inject  {{ title }}</p>
  </div>
</template>

<script>
export default {
  name: 'DD',
  inject:{
    title:{
      type:String,
      default:''
    },
    changeName:{
      type:Function,
      default:function(name){}
    }
  },
  data () {
    return {
    }
  },
  created(){
    this.changeName('赵六')
  }
}
</script>