不废话,直接正题
首先保证你的Vue版本支持Provide
下面两个简单组件我们来实现绑定
1.父组件。
<template>
<div class="home">
count now is -> {{count}} <button @click="++count">加一</button> <button @click="--count">减一</button> <br><br>
<BackupChild/>
</div>
</template>
<script>
import BackupChild from './Backup_child'
export default {
name: 'backup',
data(){
return {
count:10
}
},
provide(){
let sendCount = {}
Object.defineProperty(sendCount,'count',{
get:()=>this.count
})
return {
sendCount
}
},
methods:{
},
components: {
BackupChild
}
}
</script>
复制代码
2.子组件
<template>
<div class="home">
i am backup child page count is ->{{sendCount.count}}
</div>
</template>
<script>
export default {
name: 'backupChild',
inject:['sendCount'],
components: {
}
}
</script>
复制代码
这里简单说下。父组件通过按钮 加一,减一来控制 count的值。父组件通过provide传递给子组件,子组件inject接收。注意,在传值的过程中,通过对象传递count,由于是对象,便可使用 Object.defineProperty 来检测。当子组件调用时,便会触发 Object.defineProperty的get,返回父组件count,这样便可达到目的。
注意,由于this作用域,get使用了箭头函数