vue provide inject 用法

`provide`和`inject`是Vue.js中用于父组件向子组件传递数据的一种方式。它们可以让我们在不使用`props`和事件的情况下，实现组件之间的数据传递。

`provide`选项允许我们在父组件中注册数据并通过`inject`选项将其注入到任何后代组件中。`provide`接收一个对象，该对象包含要注入子组件的属性。`inject`选项接收一个数组，该数组包含要注入的属性的名称。

以下是一个简单的示例：

// 父组件
export default {
  provide() {
    return {
      message: 'Hello World!'
    }
  },
  // ...
}

// 子组件
export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 输出：Hello World!
  },
  // ...
}

在上面的示例中，父组件提供了一个名为`message`的属性，并在子组件中注入它。在子组件的`created`钩子函数中，我们可以访问到`message`属性的值。

需要注意的是，`provide`和`inject`并不是响应式的，也不会对子组件进行强制更新。如果需要响应式地更新数据，可以考虑使用`props`和事件来实现。

相关问题

vue3 inject用法

在Vue3中，`inject`方法是用于从父组件中提供的数据中获取值的。使用`inject`方法需要在子组件的`setup`函数中调用，并且需要在使用之前从Vue中导入`inject`方法。

下面是一个使用`provide`和`inject`的完整示例：

// 父组件代码
<script>
import { provide } from "vue"

export default {
  setup() {
    provide('info', "值")
  }
}
</script>

// 子组件代码
<template>
  {{ info }}
</template>

<script>
import { inject } from "vue"

export default {
  setup() {
    const info = inject('info')

    return {
      info
    }
  }
}
</script>

在父组件中，使用`provide`方法提供了一个名为`info`的值。在子组件中，使用`inject`方法获取了父组件中提供的`info`的值，并将其赋值给子组件的`info`变量。这样，子组件就可以使用父组件提供的值了。

需要注意的是，`inject`返回的值是响应式的，这意味着如果父组件中的`info`值发生变化，子组件中的`info`也会自动更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue 3 学习笔记 (八)——provide 和 inject 用法及原理](https://blog.csdn.net/weixin_43880397/article/details/121552232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue3 inject 用法

在 Vue3 中，inject 和 provide 是用于父组件向子组件传递数据的新方式，它们可以取代 props 和 $emit，用于更深层次的组件通信。

inject 用于在子组件中接收父组件提供的数据，它的用法如下：

1. 在父组件中使用 provide 提供数据，可以是一个对象或者一个函数返回一个对象：

// Parent.vue
import { provide } from 'vue';

export default {
  setup() {
    const data = 'Hello, World!';
    provide('data', data);
  }
}

2. 在子组件中使用 inject 接收父组件提供的数据，可以是一个数组或者一个对象：

// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    const data = inject('data');
    console.log(data); // Hello, World!
  }
}

注意，如果父组件中没有提供对应的数据，inject 会查找父组件的父组件，直到找到为止。

另外，inject 还可以指定默认值，当查找不到对应的数据时，将返回默认值：

// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    const data = inject('data', 'default value');
    console.log(data); // default value
  }
}