关于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>

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据