P19. vue3 Provide和 Inject

• App.vue

<script>
import HomeView from "./components/HomeView.vue";
export default {
  data() {
    return {
      message: '',
    };
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    HomeView
  }
}

</script>

<template>
  <div>
    <HomeView/>

  </div>

</template>

• HomeView.vue

<template>
  <div>
    <Content/>
  </div>

</template>

<script>
import Content from "./Content.vue";
export default {
  data(){
    return{
      message: "Hellokugou",
    }
  },
  //provide:{message:"Hellokugou"},
  provide(){
    return{
      message:this.message
    }
  },
  name: "HomeView",
  components: {
    Content
  }
}
</script>

<style scoped>

</style>

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <HelloKugou></HelloKugou>
  </div>
</template>


<script>
import HelloKugou from "./HelloKugou.vue";
export default {
  data(){//让每一个组件对象都返回一个对象，不对数据污染
    return{
    };
  },
  components:{
    HelloKugou
  },
  methods:{

  },
  name: "Content"
}
</script>

<style scoped>

</style>

• HelloKugou.vue

<template>
  <div>
    <h2>I am hello 组件</h2>
    <h2>{{message}}</h2>

  </div>
</template>

<script>
export default {
  name: "HelloKugou",
  data(){
    return{};
  },
  inject:['message']

};
</script>

HomeView组件是 HelloKugou的祖父组件，HelloKugou获取HomeView组件的message

Provide和 Inject 类似prop

响应式

• App.vue

<script>
import HomeView from "./components/HomeView.vue";
export default {
  data() {
    return {
      message: '',
    };
  },
  methods:{
    getChildMsg:function (value){
      console.log(value);
      this.message=value
    }
  },
  components:{
    HomeView
  }
}

</script>

<template>
  <div>
    <HomeView/>

  </div>

</template>

• HomeView.vue

<template>
  <div>
    <Content/>
    <button @click="obj.message='雷好呀'">改变message</button>
    <h2>HomeView--{{obj.message}}</h2>
  </div>

</template>

<script>
import Content from "./Content.vue";
export default {
  data(){
    return{
      message: "Hellokugou",
      obj:{
        message: "Hellokugou"
      },
    }
  },
  //provide/inject不是响应式的，
  //provide:{message:"Hellokugou"},
  provide(){
    return{
      //message:this.message
      obj:this.obj
    }
  },
  name: "HomeView",
  components: {
    Content
  }
}
</script>

<style scoped>

</style>

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <HelloKugou></HelloKugou>
  </div>
</template>


<script>
import HelloKugou from "./HelloKugou.vue";
export default {
  data(){//让每一个组件对象都返回一个对象，不对数据污染
    return{
    };
  },
  components:{
    HelloKugou
  },
  methods:{

  },
  name: "Content"
}
</script>

<style scoped>

</style>

• HelloKugou.vue

<template>
  <div>
    <h2>I am hello 组件</h2>
    <h2>{{obj.message}}</h2>

  </div>
</template>

<script>
export default {
  name: "HelloKugou",
  data(){
    return{};
  },
  //inject:['message']
  inject:['obj']

};
</script>

函数响应式

• HomeView.vue

<template>
  <div>
    <Content/>
    <button @click="message='雷好呀'">改变message</button>
    <h2>HomeView--{{obj.message}}</h2>
  </div>

</template>

<script>
import Content from "./Content.vue";
export default {
  data(){
    return{
      message: "Hellokugou",
      obj:{
        message: "Hellokugou"
      },
    }
  },
  //provide/inject不是响应式的，
  //provide:{message:"Hellokugou"},
  provide(){
    return{
      //message:this.message
      //obj:this.obj  //响应式对象方式
      message:()=>this.message   //函数返回响应式
    }
  },
  name: "HomeView",
  components: {
    Content
  }
}
</script>

<style scoped>

</style>

• HelloKugou.vue

<template>
  <div>
    <h2>I am hello 组件</h2>
<!--    <h2>HelloKugou&#45;&#45;{{message()}}</h2>-->
    <h2>HelloKugou1--{{newMsg}}</h2>
    <h2>HelloKugou2--{{newMsg}}</h2>
    <h2>HelloKugou3--{{newMsg}}</h2>

  </div>
</template>

<script>
export default {
  name: "HelloKugou",
  data(){
    return{};
  },
  computed:{
    newMsg:function (){
      return this.message()
    }
  },
  inject:['message']
  //inject:['obj']

};
</script>