vue 解决provide和inject响应

vue 解决provide和inject响应

• 官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
• provide：Object | () => Object（一个对象或返回一个对象的函数）
• inject：Array | { [key: string]: string | Symbol | Object }（一个字符串数组，或一个对象，对象的 key 是本地的绑定名）
• 要实现父子组件响应，父组件传递的数据类型必须是对象Object，子组件接收的数据类型必须是对象Object，其他数据类型都是不好使的

provide和inject响应的例子：

• 父组件：

<template>
    <div class="menu">
        <label>父组件输入框：</label>
        <input v-model="level.name" @change="levelChange(level.name)"/>
        <!-- 子组件 -->
        <my-list></my-list>
    </div>
</template>

<script>
import MyList from '@/pages/user/children/MyList'

export default {
    components:{MyList},

    provide(){
        return {
            userLevel:this.level,
        } 
    },

    data(){
        return{
            level:{name:"初始化"},
        }  
    },

    methods:{
        levelChange(val){
            this.userLevel = this.level;
            console.log(this.userLevel )//可以打印出对象属性name值改变了
        }
    }
}
</script>

• 子组件（MyList.vue）

<template>
    <div class="my-list"> 
        <p>子组件接收数据：{{userLevel.name}}</p>
        <label>父组件输入框:</label><input type="text"  v-model="userLevel.name">
    </div>
</template>

<script>
export default {
    // inject:['userLevel'],
    inject:{
        userLevel:{
            default:()=>{}
        },
    },

    data(){
        return{
        }
    } 
}
</script>

输出：

• 初始化：
  
• 修改父组件数据：输入框的值是"初始"，子组件也输出"初始
  
• 修改子组件数据：输入框的值是"子组件"，父组件输入框也显示"子组件"
  
  好啦，provide和inject实现响应，父组件的数据修改影响了子组件的更新，子组件的数据修改同样影响了父组件的更新。

数据格式为对象Object的类型，父组件修改数据影响子组件，子组件修改数据影响父组件，感觉和对象的存储有关，对象格式数据存储的是指针而不是数据，所以父子组件其实是用的同一个对象，修改的也是同一个对象，因此会实现双向响应改变，不知道我这样理解的是由有问题，若有问题，请在博客留言，大家互相学习。

拜拜啦