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