关于vue.js: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>