vue中子组件向父组件传递数据（实现加减的实例）

在Vue中，子组件想要向父组件传递数据通常通过`props`属性实现。这里举一个简单的例子，假设我们有一个计数器应用，父组件有一个初始值，并且有两个按钮，分别用于增加和减少这个值，然后子组件负责处理加减操作并更新传给父组件的数据。

**父组件（App.vue）:**

<template>
  <div>
    <child-component :value="counter" @increment="increase" @decrement="decrease"></child-component>
    <p>当前值: {{ counter }}</p>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increase() {
      this.counter++;
    },
    decrease() {
      this.counter--;
    },
  },
};
</script>

**子组件（ChildComponent.vue）:**

<template>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</template>

<script>
export default {
  props: ['value'], // 接收父组件传递的值
  methods: {
    increment() {
      this.$emit('increment', this.value + 1); // 触发自定义事件并传递新的值
    },
    decrement() {
      this.$emit('decrement', this.value - 1);
    },
  },
};
</script>

在这个例子中，子组件通过`@emit`触发自定义事件如`increment`和`decrement`，并将计算后的值作为参数传递给这些事件。父组件监听这些事件并在相应的方法中更新`counter`的值。