快捷導(dǎo)航

Vue2實現(xiàn)子組件修改父組件值的方法小結(jié)

更新時間：2025年03月05日 09:44:31 作者：ROUERYA

在 Vue 2 中,子組件不能直接修改父組件的值,因為 Vue 遵循單向數(shù)據(jù)流的原則,為了實現(xiàn)子組件修改父組件的數(shù)據(jù),本文給大家介紹了Vue2實現(xiàn)子組件修改父組件值的四種方法,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下

1. 使用 props 和 $emit

這是 Vue 官方推薦的方式。父組件通過 props 向子組件傳遞數(shù)據(jù)，子組件通過 $emit 觸發(fā)事件來通知父組件修改數(shù)據(jù)。

實現(xiàn)步驟：

父組件：通過 props 向子組件傳遞數(shù)據(jù)，并監(jiān)聽子組件的事件。

子組件：通過 $emit 觸發(fā)事件，并將新值傳遞給父組件。

示例代碼：

<!-- 父組件 Parent.vue -->
<template>
  <div>
    <p>父組件的值: {{ parentValue }}</p>
    <Child :value="parentValue" @update-value="updateParentValue" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentValue: 'Hello',
    };
  },
  methods: {
    updateParentValue(newValue) {
      this.parentValue = newValue;
    },
  },
};
</script>

<template>
  <div>
    <p>子組件的值: {{ value }}</p>
    <button @click="updateValue">修改父組件的值</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue() {
      const newValue = 'Updated Value';
      this.$emit('update-value', newValue); // 觸發(fā)事件并傳遞新值
    },
  },
};
</script>

2. 使用 .sync 修飾符

Vue 2.3+ 提供了 .sync 修飾符，可以簡化父子組件之間的雙向綁定。

實現(xiàn)步驟：

父組件：使用 :propName.sync 語法向子組件傳遞數(shù)據(jù)。

子組件：通過 this.$emit(‘update:propName’, newValue) 更新父組件的數(shù)據(jù)。

示例代碼：

<template>
  <div>
    <p>父組件的值: {{ parentValue }}</p>
    <Child :value.sync="parentValue" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentValue: 'Hello',
    };
  },
};
</script>

<template>
  <div>
    <p>子組件的值: {{ value }}</p>
    <button @click="updateValue">修改父組件的值</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue() {
      const newValue = 'Updated Value';
      this.$emit('update:value', newValue); // 使用 .sync 語法更新父組件數(shù)據(jù)
    },
  },
};
</script>

3. 使用 v-model

如果子組件需要修改父組件的一個特定值（通常是表單控件），可以使用 v-model。

實現(xiàn)步驟：
父組件：使用 v-model 綁定數(shù)據(jù)。

子組件：通過 model 選項定義 prop 和事件，并在需要時觸發(fā)事件。

示例代碼：

<template>
  <div>
    <p>父組件的值: {{ parentValue }}</p>
    <Child v-model="parentValue" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  data() {
    return {
      parentValue: 'Hello',
    };
  },
};
</script>

<template>
  <div>
    <p>子組件的值: {{ value }}</p>
    <button @click="updateValue">修改父組件的值</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value', // 定義 prop 名稱
    event: 'update-value', // 定義事件名稱
  },
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue() {
      const newValue = 'Updated Value';
      this.$emit('update-value', newValue); // 觸發(fā)事件更新父組件數(shù)據(jù)
    },
  },
};
</script>

4. 使用 Vuex（狀態(tài)管理）

如果項目復(fù)雜，父子組件之間的數(shù)據(jù)傳遞較多，可以使用 Vuex 進(jìn)行全局狀態(tài)管理。

實現(xiàn)步驟：

安裝 Vuex：

npm install vuex

定義 Vuex Store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedValue: 'Hello',
  },
  mutations: {
    updateValue(state, newValue) {
      state.sharedValue = newValue;
    },
  },
});

在父組件和子組件中使用 Vuex：

<template>
  <div>
    <p>父組件的值: {{ sharedValue }}</p>
    <Child />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  computed: {
    ...mapState(['sharedValue']),
  },
};
</script>

<template>
  <div>
    <p>子組件的值: {{ sharedValue }}</p>
    <button @click="updateValue">修改父組件的值</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['sharedValue']),
  },
  methods: {
    ...mapMutations(['updateValue']),
    updateValue() {
      this.updateValue('Updated Value'); // 調(diào)用 Vuex mutation 更新數(shù)據(jù)
    },
  },
};
</script>