vue自定义组件添加使用原生事件

最新推荐文章于 2024-07-20 18:39:05 发布

等周末的爱码士

最新推荐文章于 2024-07-20 18:39:05 发布

阅读量2.3k

点赞数 2

分类专栏： Vue笔记文章标签： javascript vue.js 原生事件 click 自定义组件

本文链接：https://blog.csdn.net/sxjit/article/details/104282034

版权

Vue笔记专栏收录该内容

21 篇文章 2 订阅

订阅专栏

自定义组件(Components)是vue的重要知识块之一，使用中不少人会发现一个问题：为什么我在组件里绑定click事件不起作用？这里先看看原因吧。
在自定义组件中直接绑定原生事件vue可是"不待见"的，它会认为你没有定义这个事件，所以没有任何反应。哪些是原生事件？例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列由官方提供的事件都是原生事件。那么咋办？

1. $emit()传递

<body>
    <div id="app">
        <Jsxj :jsxj="message" @click="JsxjChange"></Jsxj>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"Hello World"
        },
        components:{
            Jsxj:{
                props:['jsxj'],
                template:`<p @click="pChange">{{jsxj}}</p>`,
                methods: {
                    pChange(){
                        this.$emit("click")
                    }
                },
            }
        },
        methods: {
            JsxjChange(){
                this.message="Hi, Jsxj"
            }
        },
    })
</script>

第一种方法是通过$emit()传递事件。如代码：我们在自定义组件Jsxj中设置模板，在模板中<p>原生元素上触发原生click事件，调用函数pChange()，函数用$emit()向上传递自定义事件click，父组件Jsxj接收到这个事件，于是便可以正常触发click。

2. native属性

<body>
    <div id="app">
        <Jsxj :jsxj="message" @click.native="JsxjChange"></Jsxj>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"Hello World"
        },
        components:{
            Jsxj:{
                props:['jsxj'],
                template:`<p>{{jsxj}}</p>`  
            }
        },
        methods: {
            JsxjChange(){
                this.message="Hi, Jsxj"
            }
        },
    })
</script>