子传父vue实现加减

Vue是一种用于构建用户界面的渐进式JavaScript框架。在Vue中，可以通过使用指令、事件绑定和计算属性等功能来实现加减操作。

在子组件中，我们可以定义一个数据属性用于存储需要进行加减的值，例如num。然后，我们可以在模板中使用按钮和事件绑定来触发加减操作。例如，我们可以在按钮上绑定一个点击事件，当点击按钮时，触发一个加一或减一的方法。

<template>
  <div>
    <button @click="add">加一</button>
    <button @click="subtract">减一</button>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
  methods: {
    add() {
      this.num++
    },
    subtract() {
      this.num--
    }
  }
}
</script>

在父组件中，可以引入子组件，并将其添加到模板中，就可以在父组件中使用子组件实现加减功能。

<template>
  <div>
    <h1>子传父Vue实现加减</h1>
    <ChildComponent @add="handleAdd" @subtract="handleSubtract" />
    <p>父组件中的值: {{ num }}</p>
  </div>
</template>

<script>
import ChildComponent from 'ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      num: 0
    }
  },
  methods: {
    handleAdd() {
      this.num++
    },
    handleSubtract() {
      this.num--
    }
  }
}
</script>

在这个例子中，子组件中的加一和减一按钮点击事件会触发emit事件，将按钮对应的操作传递给了父组件。父组件通过监听这些事件，并改变自己的num值，实现了子传父的加减操作。