关于vue.js:P19-vue3-Provide和-Inject

66次阅读

共计 3054 个字符，预计需要花费 8 分钟才能阅读完成。

  • 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>

正文完
vue.js
发表至： vue.js
2022-11-25
 0
关于vue.js:VUE自定义事件传递默认参数同时传入自定义参数
关于vue.js:vue-项目中不同路由且同一组件识别
关于vue.js:使用vue-jsx写新手引导层组件eguidelayer
关于vue.js:vue源码分析渲染过程