利用父组件的传值完成数量控制器的功能 当点击加1按钮和减1按钮对应变化

好的，首先需要在父组件中定义一个变量来表示数量，然后将这个变量作为 props 传递给子组件。

父组件中的代码：

<template>
  <div>
    <div>数量：{{ count }}</div>
    <ChildComponent :count="count" @increment="increment" @decrement="decrement"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count += 1;
    },
    decrement() {
      this.count -= 1;
    },
  },
};
</script>

在父组件中，我们定义了一个 `count` 变量，并将其传递给子组件 `ChildComponent`。同时，我们在父组件中定义了 `increment` 和 `decrement` 方法，分别用于增加和减少数量。

子组件中的代码：

<template>
  <div>
    <button @click="$emit('increment')">+1</button>
    <div>数量：{{ count }}</div>
    <button @click="$emit('decrement')">-1</button>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true,
    },
  },
};
</script>

在子组件中，我们定义了一个 `count` props，用于接收父组件传递过来的数量值。同时，我们在按钮上绑定了 `increment` 和 `decrement` 事件，并通过 `$emit` 方法向父组件发送事件。

这样，当点击子组件中的加1按钮时，就会触发父组件中的 `increment` 方法，从而增加数量值；当点击子组件中的减1按钮时，就会触发父组件中的 `decrement` 方法，从而减少数量值。同时，父组件会将最新的数量值传递给子组件，从而更新显示。