子组件中的多个按钮与父组件中的方法

Question

我有一个有两个按钮的组件，每个按钮都有一个独特的功能：

<template>
    <v-container>
        <v - button ref = "button" / >
        <v - button ref = "buttons" / >
    </v-container>
</template>

我想如何解决父级中的两个按钮并应用我在父级中编写的两个功能。

<Button @click="refer to the two buttons" />
...
<script>
methodOne(){
    console.log("A")
}
methodTwo() {
    console.log("B")
}
</script>

我只是不知道如何正确地做到这一点。简而言之：子组件中有多个按钮，父组件中有多个功能，子组件中的按钮被触发时应该被触发。

Answer 1

您可以在子组件中使用 Vue $emit 函数。所以：

您的子组件

<template>
    <div>
        <button @click="$emit('aButttonClick')">Button A</button>
        <button @click="$emit('bButttonClick')">Button B</button>
    </div>
</template>

你的父组件

<ButtonComponent @aButttonClick="methodOne" @bButttonClick="methodTwo" />
...
<script>
methodOne(){
    console.log("A")
}
methodTwo() {
    console.log("B")
}
</script>

并且您可以在函数内部使用 emit 函数。你可以添加额外的参数。

看这里https://vuejs.org/v2/guide/components.html

子组件中的多个按钮与父组件中的方法

Multiple buttons in the child component with the methods in the parent component

vue.js

vue-component