组件绑定原生事件 两种方法

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>组件绑定原生事件</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

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

<child @click.native="handleClick2"></child>

</div>
<script>
Vue.component('child', {

    template: "<div @click='handleChildClick'>child</div>", //监听事件
    methods: {
        handleChildClick: function() {
            alert('handleChildClick');

            this.$emit('click') //自定义事件触发
        }
    }
})

var vm = new Vue({
    el: '#app',
    methods: {
        handleClick: function() {
            alert('handleClick');
        },
        handleClick2: function() {
            alert('handleClick2');
            // 方法二不用$emit 加native修饰符即可
        }
    }
})
</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容