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> `, })