Question

我刚开始学习vue2。在玩组件和自定义事件时，我遇到了问题。我期待一个带有抓住文字的警报，但没有任何反应。以下是简单的代码：

<div class="container" id="app" >
    <div v-on:newmessage="handleNewMessage">
        <message></message>
    </div>        
</div>

<script>

    Vue.component('message',{
        template: '<input type="text" @keyup.enter="handleInput">',
        methods: {
            handleInput: function(event)
            {
                this.$emit('newmessage');
            },
        }
    });

    var demo = new Vue({
        el: '#app',

        methods: {
            handleNewMessage: function(message)
            {
                alert('caught');
            }
        },
    });


</script>

请注意，如果我将 newmessage 事件监听器从 div 元素移至消息元素，则此方法正常，警报为产生的：

 //this works
 <div >
     <message v-on:newmessage="handleNewMessage"></message>
</div>

我不妨在这里遗漏一些非常基本的东西。自定义事件不会传播到本机dom父元素吗？我花了整整一个晚上寻找参考，但没有运气。

提前致谢。

Answer 1

是的，它可以解释，因为$ emit仅在<message>标签上显示（我知道）而不是<div>封闭它。您可以尝试直接发送到根组件（#app）并在那里连接处理程序。

this.$root.$emit('newmessage')

和，

<div class="container" id="app" v-on:newmessage="handleNewMessage">

（编辑）和

const component = Vue.component('message' ...)

new Vue({
    el: '#app',
    components: component
    ...)

基本上，你这里没有做错任何事。

PS：我还没有运行EDIT。但是，这个想法是沿着这些方向发展的。如果有效，请告诉我。

Answer 2

与组件和道具不同，事件名称永远不会在JavaScript中用作变量或属性名称，因此没有理由使用camelCase或PascalCase。此外，DOM模板中的v-on事件侦听器将自动转换为小写字母（由于HTML不区分大小写），因此v-on：myEvent将变为v-on：myevent –使myEvent无法收听。

由于这些原因，我们建议您始终使用kebab-case作为事件名称。

具有本机dom元素的Vue2自定义事件

2 个答案: