vue2 provide 后 inject 数据不是响应式的，不实时更新

小妖6662025-05-11 19:14

今天用 provide 后，inject 获取数据时不是实时更新的，获取的不是更新后的值

祖父组件

html 复制代码

<div style="text-align: left !important;">
  <button @click="change">更改</button>
</div>


  data() {
    return {
      name: 'init'
    }
  },
  provide() {
    return {
      name: this.name
    }
  },
  methods: {
    change() {
      this.name = 'change'
    }
  }

子孙组件

html 复制代码

<template>
  <div class="demo-select">
    name: {{ name }}
  </div>
</template>

export default {
  inject: ['name']
};

点击更改按钮 name 值不变

**原因：**传的初始值是空，不是引用类型，所以不会变成响应式，可以传函数或是引用类型

改法一：传函数类型

祖父组件

html 复制代码

<div style="text-align: left !important;">
  <button @click="change">更改</button>
</div>


  data() {
    return {
      name: 'init'
    }
  },
  provide() {
    return {
      name: () => this.name
    }
  },
  methods: {
    change() {
      this.name = 'change'
    }
  }

子孙组件

html 复制代码

<template>
  <div class="demo-select">
    name: {{ name() }}
  </div>
</template>

export default {
  inject: ['name']
};

name: () => this.name 变成函数式，每次取值都是调用函数取最新值

改法二：传引用类型

祖父组件

html 复制代码

<div style="text-align: left !important;">
  <button @click="change">更改</button>
</div>


  data() {
    return {
      pro: { name: 'init' }
    }
  },
  provide() {
    return {
      pro: this.pro
    }
  },
  methods: {
    change() {
      this.pro.name = 'change'
    }
  }

子孙组件

html 复制代码

<template>
  <div class="demo-select">
    name: {{ pro && pro.name }}
  </div>
</template>

export default {
  inject: ['pro']
};

引用类型会变为响应式。