没有合适的资源?快使用搜索试试~ 我知道了~
vue 解决provide和inject响应的问题
5星 · 超过95%的资源 7 下载量 29 浏览量
2021-01-21
10:56:11
上传
评论
收藏 89KB PDF 举报
温馨提示
试读
4页
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。 provide: Object | () => Object(一个对象或返回一个对象的函数) inject: Array | { [key: string]: string | Symbol | Object }(一个字符串数组,或一个对象,对象的 key 是本地的绑定名) 要实现父子组件响应,父组件传递的数据类型必须是对象Object,子组件接收的数据类型必须是对象Object,其他数据类型都是不好使的 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:{
weixin_38678300
- 粉丝: 4
- 资源: 1002
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页