在Vue项目中,Provide,inject实现数据绑定

1,048 阅读1分钟

不废话,直接正题
首先保证你的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使用了箭头函数