vue provide和inject小实例

1. import Vue from 'vue'
3. const ChildComponent={
4.     template:`chilid companet:{{data.value}}`,
5.     inject:['yeye','data'],
6.     mounted(){
7.     }
8. }
11. const compoent={
12.     name:'comp',
13.     components: {
14.         ChildComponent
15.     },
16.     template:` this is compoent {{text}}
17.       <input type="text" v-model.number="text">
18.       <child-component></child-component>
19.     `,
20.     props:{
21.         active:{
22.             validator(value){
23.                 return typeof value === 'boolean'
24.             }
25.         }
26.     },
27.     data(){
28.         return {
29.             text:0
30.         }
31.     }
32. }
33. // Vue.component('CompOne',compoent)
34. new Vue({
35.     el:'#root',
36.    /* provide:{//直接赋值是不能传递的，因为这个this对象还没有创建,跨阶层调用
37.         yeye:this,
38.         value:this.value
39.     },*/
40.     provide(){//所以要用方法的形式进行赋值，默认没有reactive的属性，
41.         const data={}
42.         Object.defineProperty(data,'value',{
43.             get:()=>this.value,//返回的是这里的value的实例的值
44.             enumerable:true
45.         })
46.        return {
47.            yeye:this,
48.            data
49.         }
50.     },
51.     components:{
52.         CompOne:compoent
53.     },
54.     data(){
55.         return {
56.            value:123
57.         }
58.     },
59.     template:`
60.         
61.             <comp-one></comp-one>
62.           <input type="text" v-model="value">
63.             
64.     `,
65. })

复制代码

 

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