欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3?組件之間傳值及適用場景分析

 更新時(shí)間：2025年05月22日 09:57:10   作者：yuren_xia  
這篇文章主要介紹了Vue3組件之間傳值及適用場景分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

在 Vue3 中，組件之間的數(shù)據(jù)傳遞主要有以下幾種方式，適用于不同的場景：

一、父組件向子組件傳值：props

1. 子組件定義 props

<!-- ChildComponent.vue -->
<script setup>
// 組合式 API（推薦）
const props = defineProps({
  title: {
    type: String,
    default: '默認(rèn)標(biāo)題'
  },
  count: {
    type: Number,
    required: true
  }
});
</script>
<template>
  <div>{{ title }} - {{ count }}</div>
</template>
<!-- 選項(xiàng)式 API -->
<script>
export default {
  props: {
    title: String,
    count: {
      type: Number,
      required: true
    }
  }
}
</script>

2. 父組件傳遞數(shù)據(jù)

<template>
  <ChildComponent 
    :title="'Hello Vue3'" 
    :count="42"
  />
</template>

二、子組件向父組件傳值：emit 事件

1. 子組件觸發(fā)事件

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['updateCount']); // 定義事件
function increment() {
  emit('updateCount', 10); // 觸發(fā)事件并傳遞數(shù)據(jù)
}
</script>
<template>
  <button @click="increment">增加計(jì)數(shù)</button>
</template>

2. 父組件監(jiān)聽事件

<template>
  <ChildComponent 
    :count="count"
    @updateCount="count = $event" <!-- 接收子組件傳遞的值 -->
  />
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

三、雙向綁定：v-model

1. 子組件支持 v-model

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
function updateValue(newValue) {
  emit('update:modelValue', newValue);
}
</script>
<template>
  <input 
    :value="modelValue" 
    @input="updateValue($event.target.value)"
  >
</template>

2. 父組件使用 v-model

<template>
  <ChildComponent v-model="text" /> <!-- 自動同步數(shù)據(jù) -->
</template>
<script setup>
import { ref } from 'vue';
const text = ref('初始值');
</script>

四、跨層級傳值：provide / inject

1. 祖先組件提供數(shù)據(jù)

<!-- AncestorComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
const theme = ref('dark');
provide('theme', theme); // 提供數(shù)據(jù)
</script>

2. 后代組件注入數(shù)據(jù)

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';
const theme = inject('theme'); // 注入數(shù)據(jù)
</script>
<template>
  <div :class="theme">當(dāng)前主題：{{ theme }}</div>
</template>

五、通過 Context 共享數(shù)據(jù)（如 Pinia 狀態(tài)管理）

1. 安裝 Pinia

npm install pinia

2. 創(chuàng)建 Store

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

3. 組件中使用 Store

<template>
  <div>Count: {{ counterStore.count }}</div>
  <button @click="counterStore.increment()">+1</button>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
</script>

總結(jié)：不同場景的傳值方式

場景方法適用性
父子組件直接通信props + emit父子層級明確，數(shù)據(jù)流單向
表單輸入雙向綁定v-model表單類組件（如輸入框、下拉框）
跨層級組件通信provide / inject深層次嵌套組件（如全局配置、主題）
復(fù)雜應(yīng)用狀態(tài)共享Pinia / Vuex多組件共享狀態(tài)（推薦中大型項(xiàng)目）

推薦實(shí)踐：

  • 優(yōu)先使用 props 和 emit 實(shí)現(xiàn)父子通信。
  • 簡單雙向綁定用 v-model，復(fù)雜邏輯用事件。
  • 跨層級或全局狀態(tài)使用 Pinia。
  • 避免過度依賴 provide/inject，可能導(dǎo)致組件耦合。

到此這篇關(guān)于Vue3 組件之間傳值的文章就介紹到這了,更多相關(guān)Vue3 組件之間傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論