可以将具有某些方法的对象传递给Vue 3 JS中的子组件

如何解决可以将具有某些方法的对象传递给Vue 3 JS中的子组件

父组件具有方法“ startMethods”，该方法也具有其他方法“ onDecrementStart”。 OnDecrementStart方法仅调用Alert。 在此行下，添加了一个代码示例，但是该代码不起作用。

<template>
  <div class="parent">
    <div class="main">
      <img alt="Vue logo" src="../assets/logo.png">
      <SettingsBoard :max="maxValue" :start="startValue"
               :startInc="startMethods"
      />
     
    </div>
  </div>
</template>
<script>
import SettingsBoard from "@/components/SettingsBoard";

export default {
  name: "Main",components: {
    SettingsBoard
  },methods: {
    startMethods: {
      onDecrementStart () {
        alert('Decrement')
      },onIncrementStart () {
        alert('Incriment')
      }
    },}

}
</script>

SettingsBoard组件

<template>
  <div class="container">
        <label>
          <button :@click="startInc.onDecrementStart()">-</button>
        </label>
      </div>
</template>

<script>

export default {
  name: "SettingsBoard",props: {
    startInc: Object
  },}
</script>

如果可能的话，我想得到类似的东西。

<template>
  <div class="container">
        <label>
          <button :@click="startInc.onDecrementStart()">-</button>
          <button :@click="startInc.onIncrementtStart()">+</button>
        </label>
      </div>
</template>

<script>

export default {
  name: "SettingsBoard",}
</script>

解决方法

要在父组件中运行方法，您应该发出一个自定义事件，该事件将父方法作为处理程序：

 <label>
      <button @click="$emit('decrement')">-</button>
      <button @click="$emit('increment')">+</button>
    </label>

在父组件中：

<div>
    <SettingsBoard
      @decrement="onDecrementStart"
      @increment="onIncrementStart"
    />


...


 methods: {
    onDecrementStart() {
      this.count--;
    },onIncrementStart() {
      this.count++;
    },},

LIVE EXAMPLE