代码之家 › 专栏 › 技术社区 › Mav

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

javascript-events vue.js javascript

0

Mav · 技术社区 · 7 年前

假设我有一个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);
        }
    }
}

2 回复 | 直到 5 年前

1

4

Dcynsd 7 年前

<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)
    },
}

2

1

Nathan 7 年前

使用 $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 值(布尔值)。