详解Vue中子组件修改父组件传过来的值的三种方式

<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) {
      this.count = data;
    },
  },
};
</script>

<template>
  <div class="goodsBasic">
    <div>父组件：{{ count }}</div>
    <el-button @click="changeCount">方式1</el-button>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    changeCount() {
      this.$emit("updateCount", this.count + 1);
    },
  },
};
</script>

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

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

<template>
  <div class="goodsBasic">
    <div>父组件：{{ text }}</div>
    <el-button @click="changeCount">方式2</el-button>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
  },
  methods: {
    changeCount() {
      this.$emit("update:text", "我被强制修改了");
    },
  },
};
</script>

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

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

<template>
  <div class="goodsBasic">
    <div>子组件：{{ son_count }}</div>
    <el-button @click="changeCount">方式3</el-button>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      son_count: this.count,
    };
  },
  methods: {
    changeCount() {
      this.son_count++;
    },
  },
};
</script>