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

父组件有方法“startMethods”，它还有一些其他方法“onDecrementStart”。OnDecrementStart方法仅调用警报。 在这一行下，添加了一个代码示例，但该代码不起作用

<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>

从“@/components/SettingsBoard”导入设置板；
导出默认值{
名称：“主要”，
组成部分：{
设置板
},
方法：{
开始方法：{
onDecrementStart（）{
警报（“减量”）
},
onIncrementStart（）{
警惕（“犯罪”）
}
},
}
}

设置板组件

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

<script>

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

-
导出默认值{
名称：“设置板”，
道具：{
startInc：对象
},
}

如果可能的话，我想变成那样。

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

<script>

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

-
+
导出默认值{
名称：“设置板”，
道具：{
startInc：对象
},
}

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

 <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++;
    },
  },

...
方法：{
onDecrementStart（）{
这是伯爵；
},
onIncrementStart（）{
这个.count++；
},
},

---

你好，@Boussadjra Brahim。我想是的，这是工作。但是我想创建一个有两种方法的对象。您只需将一种方法与另一种方法分离为“方法”。但是，我的想法是这样的：方法：{startMethods:{onDecrementStart（）{alert（'Decrement'）}，onIncrementStart（）{alert（'Incriment'）}，}语法不正确，应该将它们放在

方法

对象中，您使用的vue框架有其局限性