SoFunction
Updated on 2025-04-12

Detailed explanation of three ways for child components to modify the values ​​passed by the parent component in Vue

Method 1: The child component sends emit, triggers the parent component to modify

Parent component

<template>
  <div>
    <son :count="count" @updateCount="updateCount" />
  </div>
</template>

<script>
import son from "./son";
export default {
  data() {
    return {
      count: 0,
    };
  },
  components: { son },
  methods: {
    updateCount(data) {
       = data;
    },
  },
};
</script>

Subcomponents

&lt;template&gt;
  &lt;div class="goodsBasic"&gt;
    &lt;div&gt;Parent component：{{ count }}&lt;/div&gt;
    &lt;el-button @click="changeCount"&gt;Way1&lt;/el-button&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    changeCount() {
      this.$emit("updateCount",  + 1);
    },
  },
};
&lt;/script&gt;

Method 2: Force modification in child components

Parent component

<template>
  <div>
    <son :="text" />
  </div>
</template>

<script>
import son from "./son";
export default {
  data() {
    return {
      text: "hello world",
    };
  },
  components: { son },
};
</script>

Subcomponents

&lt;template&gt;
  &lt;div class="goodsBasic"&gt;
    &lt;div&gt;Parent component：{{ text }}&lt;/div&gt;
    &lt;el-button @click="changeCount"&gt;Way2&lt;/el-button&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
  },
  methods: {
    changeCount() {
      this.$emit("update:text", "I've been modified forcibly");
    },
  },
};
&lt;/script&gt;

Method 3: The child component defines a value to replace the value passed by the parent component (not recommended, the value of the parent and child component of this method is not modified synchronously)

Parent component

<template>
  <div>
    <son :count="count" />
  </div>
</template>

<script>
import son from "./son";
export default {
  data() {
    return {
      count: 0,
    };
  },
  components: { son },
};
</script>

Subcomponents

&lt;template&gt;
  &lt;div class="goodsBasic"&gt;
    &lt;div&gt;Subcomponents：{{ son_count }}&lt;/div&gt;
    &lt;el-button @click="changeCount"&gt;Way3&lt;/el-button&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      son_count: ,
    };
  },
  methods: {
    changeCount() {
      this.son_count++;
    },
  },
};
&lt;/script&gt;

The above is a detailed explanation of the three ways in which child components in Vue modify the values ​​transmitted by the parent component. For more information about Vue subcomponents modifying the values ​​transmitted by the parent component, please pay attention to my other related articles!