Vue入门 Demo16 给组件绑定原生事件

最新推荐文章于 2023-06-22 21:21:20 发布

城南花已开呀

最新推荐文章于 2023-06-22 21:21:20 发布

阅读量85

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36778310/article/details/104712967

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue入门 Demo16 给组件绑定原生事件

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>给组件绑定原生事件</title> 
        <script src="./vue.js"></script>
        
    </head> 
    <body>
        <div id="app">  
            <!-- 监听的是自定义事件,无法在页面中进行触发此事件 -->
            <child @click="handerClick"></child>
            <!-- 如果嫌麻烦,想要将自定义事件可以转换为原生的事件只需要在click后面绑定一个修饰符即可,此时可以这样写 -->
            <!-- <child @click.native="handerClick"></child> -->
        </div>
        <script>

            Vue.component('child',{
                // 监听的是原生事件
                template: '<div @click="handerChildClick">Child</div>',
                methods: {
                    handerChildClick: function(){
                        //点击可以弹出
                        alert("2");
                        //如果想在子组件中弹出事件可以这样写,此时弹窗可以弹出"1"
                        this.$emit('click');
                    }
                }
            })
        
            var vm = new Vue({
                el: "#app",
                methods: {
                    handerClick: function(){
                        //点击事件无法弹出
                        alert("1");
                    }
                }
            })
        </script> 
    </body> 
</html>