Question

说我有一个Vue组件Checkbox.vue，内容如下。

<template>
    <div class="checkbox">
        <input id="checkbox" type="checkbox">
        <label for="checkbox">Label</label>
    </div>
</template>

如何从另一个组件向其添加事件侦听器，以触发方法来获取其值，像这样

//App.vue

<template>
    <checkbox @input="someMethod"></checkbox>
</template>

import Checkbox from 'checkbox';    
export default{
    components: {
        'checkbox': Checkbox
    },

    methods: {
        someMethod(){
            console.log(GET CHECKBOX VALUE);
        }
    }
}

Answer 1

<div class="checkbox">
     <input id="checkbox" type="checkbox" @click="onClickMe">
     <label for="checkbox">Label</label> 
</div>

methods: {
    onClickMe() {
        this.$emit('child-say','hello');
    } 
}



App.vue
    <Checkbox v-on:child-say="someMethod" />

methods: {
    someMethod(data) {
        console.log(data)
    },
}

Answer 2

使用$emit触发事件：

Checkbox.vue

<template>
    <div class="checkbox">
        <input id="checkbox" type="checkbox" @change="$emit('change', $event.target.checked)">
        <label for="checkbox">Label</label>
    </div>
</template>

这使您可以触发所需的任何事件。父组件中的事件处理程序将在每次发出时被调用。在这种情况下，事件处理程序将收到一个包含复选框的checked值（布尔值）的参数。

VueJS |如何将事件处理程序分配给自定义元素

2 个答案: