Vue给组件绑定原生事件

最新推荐文章于 2023-11-30 16:37:04 发布

要不要吃烤肉

最新推荐文章于 2023-11-30 16:37:04 发布

阅读量191

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/Smart_J_King/article/details/108588532

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

给组件绑定原生事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给组件绑定原生事件</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <child @click="handleClick"></child> -->
        <!-- 给组件绑定原生事件只需要在事件后面添加修饰符：“ .native ” -->
        <child @click.native="handleClick"></child>
    </div>

    <script>
        Vue.component('child', {
            // template: "<div @click='handleChildClick'>给组件绑定原生事件</div>",  //非原生绑定事件做法
            template: "<div>给组件绑定原生事件</div>",
            methods: {
                handleChildClick: function() {
                    alert("Child Click");
                    this.$emit('click');
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            methods: {
                handleClick: function() {
                    alert('Click')
                }
            }
        })
    </script>
</body>
</html>