函式調用 - daniel-qa/Vue GitHub Wiki

函式調用

defineEmits

inject 和 provide

provide('message', message);  // 提供数据
provide('changeMessage', changeMessage);  // 提供方法

const message = inject('message');  // 注入数据
const changeMessage = inject('changeMessage');  // 注入方法

inject 和 provide 是 Vue 3 中的一对 API，通常用于跨组件共享数据和方法，尤其是在组件树的深层传递数据时。

下面是一个简单的示例，演示如何使用 provide 和 inject 来共享数据和函数：

父组件（提供数据和函数）

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
    <child-component />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const message = ref('Hello from Parent');
const changeMessage = () => {
  message.value = 'Message Changed';
};

provide('message', message);  // 提供数据
provide('changeMessage', changeMessage);  // 提供方法
</script>

子组件（注入数据和函数）

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const message = inject('message');  // 注入数据
const changeMessage = inject('changeMessage');  // 注入方法
</script>
  • 解释：

在父组件中，我们使用 provide 将 message 和 changeMessage 提供给整个子组件树。

在子组件中，使用 inject 注入这些数据和方法，并直接在模板中使用。

这样，子组件就能访问父组件提供的数据和方法，而不需要通过 props 逐层传递。

P.S 即使组件不在父子层级，它们也可以共享数据或方法，只要它们位于相同的祖先组件中，并且通过祖先组件的 provide 和 inject 实现。

⚠️ **GitHub.com Fallback** ⚠️