- 官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
- provide:Object | () => Object(一个对象或返回一个对象的函数)
- inject:Array<string> | { [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实现响应,父组件的数据修改影响了子组件的更新,子组件的数据修改同样影响了父组件的更新