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

发布时间:2022-04-21 13:47:46 作者:iii
来源:亿速云 阅读:376

今天小编给大家分享一下vue自定义组件怎么添加使用原生事件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

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

自定义组件(Components)是vue的重要知识块之一,使用中不少人会发现一个问题:为什么我在组件里绑定click事件不起作用?这里先看看原因吧。

在自定义组件中直接绑定原生事件vue可是"不待见"的,它会认为你没有定义这个事件,所以没有任何反应。

哪些是原生事件?

例如click单击、mouseover鼠标移入、mouseout鼠标移出、keyup键盘按下抬起、keydown键盘按下…等等一系列由官方提供的事件都是原生事件。那么咋办?

. $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。

. 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>

第二种方法相对简单。

代码大同小异,不过我们不再用$emit()从子向父传递自定义事件,太麻烦了,而是用native属性帮忙@click.native="JsxjChange",这样组件就会知道这是原生事件click,调用相应的函数。 

vue使用原生事件

在项目中用到element ui 这个ui框架,有些组件没有封装的事件,例如click事件 ,我在使用时感觉不起作用,后来查看vue官方文档,发现有些原生事件是不提供,还有我们自定义的组件也是不能直接使用click事件的 ,需要在click事件后写上.native才能生效

即 例如:

<el-card @click.native = "enter"></el-card>

以上就是“vue自定义组件怎么添加使用原生事件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. Vue中怎么根据条件添加click事件
  2. Vue EventBus自定义组件事件传递

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:vue怎么给自定义的组件绑定点击事件

下一篇:怎么用Python3代码实现把情书写到图片中

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》