vue provide和inject小实例

import Vue from 'vue'

const ChildComponent={
    template:`<div>chilid companet:{{data.value}}</div>`,
    inject:['yeye','data'],
    mounted(){
    }
}


const compoent={
    name:'comp',
    components: {
        ChildComponent
    },
    template:`<div> this is compoent {{text}}
      <input type="text" v-model.number="text">
      <child-component></child-component>
    </div>`,
    props:{
        active:{
            validator(value){
                return typeof value === 'boolean'
            }
        }
    },
    data(){
        return {
            text:0
        }
    }
}
// Vue.component('CompOne',compoent)
new Vue({
    el:'#root',
   /* provide:{//直接赋值是不能传递的，因为这个this对象还没有创建,跨阶层调用
        yeye:this,
        value:this.value
    },*/
    provide(){//所以要用方法的形式进行赋值，默认没有reactive的属性，
        const data={}
        Object.defineProperty(data,'value',{
            get:()=>this.value,//返回的是这里的value的实例的值
            enumerable:true
        })
       return {
           yeye:this,
           data
        }
    },
    components:{
        CompOne:compoent
    },
    data(){
        return {
           value:123
        }
    },
    template:`
        <div>
            <comp-one></comp-one>
          <input type="text" v-model="value">
        </div>    
    `,
})