如何理解Vue的给组件绑定原生事件

2024年2月9日 173次阅读 来源: 洪定伦

案例：

<div id="app">
    <my-comp @click.native="doThis"></my-comp>
    <div @click="doThis">我是元素</div>
</div>
<script>
    Vue.component('my-comp', {
        template: '<div>我是组件</div>'
    });
    new Vue({
        el: '#app',
        methods: {
            doThis: function() {
                console.log('click');
            }
        }
    });
</script>

结果说明：

点击[我是组件][我是元素]都可以触发doThis函数，如果组件click事件去掉native修饰将不会触发doThis事件，因为Vue把它当做组件的自定义事件了，而组件的自定义事件的触发需要使用this.$emit('click')。
    原文作者：洪定伦
    原文地址: https://segmentfault.com/a/1190000010699946
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞