欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue给组件绑定原生事件

程序员文章站 2022-05-30 22:43:45
...
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child @click="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>

但是我们绑定的事件 相当于 自定义的事件 所以并不会 运行

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

<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child @click="handleClick"></child>
    </div>

    <script>
        // 这里的div里面的事件是原生事件上面的事件绑定的是自定义事件所以不会运行
        Vue.component('child', {
            template: '<div @click="handleChildClick">Child</div>',
            methods: {
                handleChildClick: function() {
                    alert('child click')
                }
            }
        })


        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick: function() {
                    alert('click')

                }
            }
        })
    </script>

</body>

</html>

vue给组件绑定原生事件
那么自定义事件应该怎么触发事件

vue给组件绑定原生事件
vue给组件绑定原生事件

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

<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child @click="handleClick"></child>
    </div>

    <script>
        // 这里的div里面的事件是原生事件上面的事件绑定的是自定义事件所以不会运行
        Vue.component('child', {
            template: '<div @click="handleChildClick">Child</div>',
            methods: {
                handleChildClick: function() {
                    // alert('child click')
                    this.$emit('click')
                }
            }
        })


        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick: function() {
                    alert('click')

                }
            }
        })
    </script>

</body>

</html>

但是这种方法过于麻烦 我们可以通过事件修饰符 去改善他

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

<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child @click="handleClick"></child>
    </div>

    <script>
        // 这里的div里面的事件是原生事件上面的事件绑定的是自定义事件所以不会运行
        Vue.component('child', {
            template: '<div @click="handleChildClick">Child</div>',
            methods: {
                handleChildClick: function() {
                    // alert('child click')
                    this.$emit('click')
                }
            }
        })


        var vm = new Vue({
            el: '#root',
            methods: {
                handleClick: function() {
                    alert('click')

                }
            }
        })
    </script>

</body>

</html>

vue给组件绑定原生事件

相关标签: vue 学习记录