论坛 › MES › vue provide和inject小实例

张国伟 发表于 2022-8-9 14:47:17

vue provide和inject小实例

import Vue from 'vue'

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


const compoent={
    name:'comp',
    components: {
      ChildComponent
    },
    template:` this is compoent {{text}}
      <input type="text" v-model.number="text">
      <child-component></child-component>
    `,
    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:`
      
            <comp-one></comp-one>
          <input type="text" v-model="value">
            
    `,
}) 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

查看完整版本: vue provide和inject小实例