多層組件的資料傳輸 - daniel-qa/Vue GitHub Wiki

多層組件的資料傳輸

inject

  • 父組件
// 提供接收名單数据和更新方法
const column3Items = ref([]);
provide("column3Items", column3Items);
  • 子組件
const column3Items = inject("column3Items", ref([])); // 接收名單

因使用 ref 響應式，故子組件可以直接修改父組件變數，就會直接改變視圖。

// 記得要引用
import { ref, computed, onMounted, provide,inject } from "vue";
  • 1 . 父子組件間資料傳遞：使用 props 和 emit 進行傳遞。
  • 2 . 跨層級組件資料傳遞：使用 provide 和 inject 來提供和注入資料。
  • 3 . 狀態管理：對於較大型應用，使用 Vuex 或 Pinia 來管理全局狀態，這樣可以跨越多層組件進行資料的共享與更新。

上述方法各有優缺，根據應用的規模選擇適合的解決方案。

2 .跨層級組件資料傳遞：使用 provide 和 inject 來提供和注入資料。

provide, 可以提供變數，或 function 給子組件

通过方法修改父组件数据（推荐）

最简单的方法是让子组件通过事件向父组件发送修改请求，父组件则通过方法来修改数据。

  • 父组件（提供数据和修改方法）
// 提供数据给子组件
provide('message', message);

// 提供修改数据的方法给子组件
provide('updateMessage', (newMessage) => {
  message.value = newMessage; // 修改父组件的 message
});

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>父组件提供的数据: {{ message }}</p>
    <ChildComponent />
  </div>
</template>

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

const message = ref('Hello from Parent'); // 使用 ref 创建响应式数据

// 提供数据给子组件
provide('message', message);

// 提供修改数据的方法给子组件
provide('updateMessage', (newMessage) => {
  message.value = newMessage; // 修改父组件的 message
});
</script>
  • 子组件（注入并修改数据）
const injectedMessage = inject('message'); // 注入父组件的数据
const updateMessage = inject('updateMessage'); // 注入父组件的修改方法

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>子组件接收到的数据: {{ injectedMessage }}</p>
    <el-button @click="changeMessage">修改消息</el-button>
  </div>
</template>

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

const injectedMessage = inject('message'); // 注入父组件的数据
const updateMessage = inject('updateMessage'); // 注入父组件的修改方法

const changeMessage = () => {
  if (updateMessage) {
    updateMessage('New message from Child'); // 调用父组件的方法修改数据
  }
};
</script>

provide 和 inject 示例，展示如何在父组件和子组件之间传递数据。 (只有讀取)

  • 1 . 父组件：提供数据

父组件提供一个数据项，子组件可以注入并使用它。

import { provide } from 'vue';

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>父组件提供的数据: {{ message }}</p>
    <ChildComponent />
  </div>
</template>

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

const message = 'Hello from Parent';  // 父组件的数据

// 提供 message 数据给子组件
provide('message', message);
</script>
  • 2 . 子组件：注入父组件的数据

子组件通过 inject 来获取父组件提供的数据，并在模板中使用它。

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>子组件接收到的数据: {{ injectedMessage }}</p>
  </div>
</template>

<script setup>

import { inject } from 'vue';

// 注入父组件提供的 message 数据
const injectedMessage = inject('message');

</script>

  • 在 ParentComponent.vue 中，父组件使用 provide('message', message) 提供了一个数据项 message。

  • 在 ChildComponent.vue 中，子组件使用 inject('message') 注入父组件提供的数据，并在模板中展示。

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