给组件绑定原生事件以及事件修饰符native

在这里插入图片描述
上述代码点击页面的Child不会有任何输出,因为绑定的是自定义事件。想要有输出,需要这样做:
在这里插入图片描述

<body>
    <div id="app">
        <child @click="handleClick"></child>
    </div>

    <script>
        Vue.component('child', {
    
    
            template: '<div @click="componentClick">Child</div>',
            methods: {
    
    
                componentClick() {
    
    
                    this.$emit('click', '子组件通过自定义事件传递的值')
                }
            }
        })
        var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    },
            methods: {
    
    
                handleClick(val) {
    
    
                    console.log(val)
                }
            }
        });
    </script>
</body>

在这里插入图片描述
但是这样做太麻烦了,可以有更简单的方法:事件修饰符native

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/dyw3390199/article/details/112424883