provide和inject

# Vue 2

# provide和inject的响应式处理

# 1.传入响应式数据

提示

vue2虽然不能像vue3那样创造响应式数据ref、reactive，但vue2的this就是个响应式数据。如果我们直接在父元素中提供依赖this，那么后代组件就能获得响应式。

// <!-- 父组件 -->
provide() {
  return {
    parent: this
  }
}

1
2
3
4
5
6

<!-- 子组件 -->
<template>
  <div class="child">
    <!-- 模板中使用时，this不能省 -->
    <div>子组件：{{ this.parent.name }}</div>
    <button @click="print">打印响应式数据</button>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    inject: ['parent'],
    methods: {
      print() {
        console.log(this.parent.name) // 方法中使用
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2.以函数式的方式传入

提示

父组件中以函数式的方式提供依赖，后代组件中采用函数的方式调用。

// <!-- 父组件 -->
provide() {
  return {
    parentName: () => this.name
  }
}

1
2
3
4
5
6

<template>
  // <!-- 子组件 -->
  <div class="child">
    <!-- 模板中使用时，this不能省 -->
    <div>子组件：{{ this.parentName() }}</div>
    <button @click="print">打印响应式数据</button>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    inject: ['parentName'],
    methods: {
      print() {
        console.log(this.parentName()) // 方法中使用时，以函数的方式调用
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

编辑

上次更新: 2023/04/01, 15:26:22

← 响应式细节 EventBus→