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

【问题标题】：It's possible to pass an object which has some methods to the child component in the Vue 3 JS可以将具有某些方法的对象传递给 Vue 3 JS 中的子组件
【发布时间】：2021-02-14 08:53:40
【问题描述】：

父组件有方法“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",
  props: {
    startInc: Object
  },
}
</script>

【问题讨论】：

标签： vue.js command-line-interface vuejs3

【解决方案1】：

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

 <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

【讨论】：

你好，@Boussadjra Brahim。我想是的，这将是工作。但我想创建一个具有两种方法的对象。您只需将一种方法与另一种方法分离为“方法”。但是，我的想法是这样的：methods: { startMethods: { onDecrementStart () { alert('Decrement') }, onIncrementStart () { alert('Incriment') } }, }
语法不正确，您应该将它们放在methods 对象中，您使用的 vue 框架有其局限性