Vue学习笔记（十二）之给组件绑定原生事件

现在给一个组件绑定一个点击事件，在组件中直接绑定需要通过它的子组件进行触发，因为他绑定的事件并不是原生事件，而是一个自定义事件。在组件模板中绑定的事件才是原生事件，例如
效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="root">
    <child @click="handleClick"></child>
    <!--自定义事件-->
</div>
<script>
    Vue.component('child', {
        template: '<div @click="handleChildClick">child</div>',
        //这里click绑定的是原生事件
        methods: {
            handleChildClick: function() {
                this.$emit('click')
                // 子组件向外触发click自定义事件
            }
        }
    })

    var vm = new Vue({
        el: '#root',
        methods: {
            handleClick: function() {
                alert('click')
            }
        }
    })
</script>
</body>
</html>

上述写法过于复杂，还可以通过.native直接实现
效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="root">
    <child @click.native="handleClick"></child>
    <!--直接绑定到原生事件-->
</div>
<script>
    Vue.component('child', {
        template: '<div>child</div>',
    })

    var vm = new Vue({
        el: '#root',
        methods: {
            handleClick: function() {
                alert('click')
            }
        }
    })
</script>
</body>
</html>

FEATURED TAGS

FRIENDS