vue 事件中的 .native

最新推荐文章于 2024-05-11 09:31:58 发布
最新推荐文章于 2024-05-11 09:31:58 发布
阅读量3.5w 收藏 27
点赞数 7
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cofecode/article/details/78890001
版权

.native是什么？

.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。

例子
给普通的标签加事件，然后加native是无效的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click.native="clickFn">按钮</button>
    </div>
<script src='vue.js'></script>
<script>


    new Vue({
        el:'#app',
        data:{
        },
        methods:{
            clickFn () {
              console.log('点击按钮了')
          }
        }
    })

</script>
</body>
</html>

onclick事件不会触发！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <card @click.native="clickFn">按钮</card>
    </div>
<script src='vue.js'></script>
<script>

    Vue.component('card',{
        template:'<p>这是card组件<button>按钮</button></p>'
    })

    new Vue({
        el:'#app',
        data:{
            state:false
        },
        methods:{
            clickFn (e) {
              console.log(e)  //打印出MouseEvent对象
              if (e.target.nodeName === 'IMG') {  // 可以对点击的target标签进行判断
                this.dialogImageUrl = file.target.src
                this.dialogVisible = true
              }
          }
        }
    })

</script>
</body>
</html>

总结： .native - 主要是给自定义的组件添加原生事件。

cofecode
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
Vue: native事件修饰符的作用
qq_43650979的博客
07-28 462
在父组件中，如果想为子组件绑定一个点击事件，有可能这么写： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app">
浅谈vue中组件绑定事件时是否加.native
01-19
1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <!-- 用户名 placeholder=请输入用户名></mt> --> <input type=text @keyup.native=show($...
vue事件修饰符.native
cmhahaha的博客
08-11 1750
问题 在写代码时我注意到click事件的native修饰符，如下： <el-dropdown-item divided @click.native="logout"> <span style="display:block;">退出登录</span> </el-dropdown-item> 请问这里的native是什么，有什么用？对于自定义的组件，如果添加@click而不加.native，我们点击这个组件，logout会执行吗？带着以上问题我..
推荐使用：Vue Native —— 跨平台移动应用开发的利器！
最新发布
gitblog_00051的博客
05-11 513
推荐使用：Vue Native —— 跨平台移动应用开发的利器！ 项目地址:https://gitcode.com/GeekyAnts/vue-native-core 警告：此项目已被废弃，不再维护。但其历史价值和理念仍然值得借鉴和学习。 项目介绍 Vue Native 是一个框架，它允许开发者使用 JavaScript 来构建跨平台的原生移动应用。它是基于 React Native 的封装，所以...
vue中的.native
m0_46644991的博客
07-06 565
vue中的.native修饰符 如果你想在某个组件的根元素上绑定事件，直接使用 @click=’‘function’ 是不生效的，我们可以添加.native修饰符 @click.native=’‘function’’
native(百度百科)
waveeee的专栏
02-25 1978
 一. 什么是Native Method　　简单地讲，一个Native Method就是一个java调用非java代码的接口。一个Native Method是这样一个java的方法：该方法的实现由非java语言实现，比如C。这个特征并非java所特有，很多其它的编程语言都有这一机制，比如在C＋＋中，你可以用extern "C"告知C＋＋编译器去调用一个C的函数。　　"A native me
Vue中native的用法
qq_44845659的博客
01-05 2905
Vue中native的用法 native native在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件，但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解： 例子 四个按钮，分别是普通标签不加native和加native，自定义标签不加native和加native <!DOCTYPE html> <html> <h
详解Vue.js中.native修饰符
10-18
主要介绍了Vue.js中.native修饰符,给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的。需要的朋友可以参考下
vue组件添加事件@click.native操作
01-21
1，给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) <Item xss=removed></Item>...
关于vue的.native修饰符
Jaya先生的博客
01-17 1220
问题起源：在使用自定义的文件上传组件时，由于项目需要，要在点击时获取到item的id，但是由于是自定义的组件，因此在操作过程中发现@click绑定的方法并不执行。在度娘的帮助下，总算是找到了解决办法，即：加上.native修饰符 &lt;file-upload label="添加" @click.native="setId(item.id)" @fileUploaded="fileUpload...
vue中'. native'修饰符的使用
迪迦 • 奥特曼
03-05 1565
native是什么？ .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件。 官网的解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的(我觉的这个说法一点也不通俗)。 举列说明 这时点...
.native
jiaboboyu的博客
03-15 148
vue中的.native
.native修饰符的作用和使用场景举例
m0_57742630的博客
07-27 738
通过使用.native修饰符，可以将原生事件绑定到组件的根元素上，而不是绑定到组件内部的子组件元素上。假设我们有一个自定义的按钮组件（Button），在组件内部它可能有多个元素（例如：一个span用于文本显示，一个i用于图标），我们希望在使用Button组件的时候，能够方便地监听click事件。这时可以使用.native修饰符。使用.native修饰符的好处是，在不修改Button组件内部的代码的情况下，我们可以在使用Button组件的地方方便地监听到原生的click事件，提高了组件的灵活性和可重用性。
vue事件的.native属性
05-29 752
一个原生input输入框的敲击回车事件可以使用 @keyup.enter="addNew()" 当使用非原生的input输入框时,当上一种方法无效,可以使用 @keyup.enter.native="addNew()"
vue事件修饰符native 的作用
xilejie的博客
07-29 3675
转载： https://blog.csdn.net/qq_29468573/article/details/80771625 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的。 ...
.native是什么？
zhangyubababa的博客
02-19 1232
.native是什么？ .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件
vue中，.native属性详解
06-09
在 Vue 中，`.native` 属性用于在组件上监听原生事件。Vue 组件封装了一些自定义事件（如 `click`、`input` 等），这些事件是组件自身所触发的，而非原生 DOM 事件。如果我们需要监听原生 DOM 事件，可以使用 `.native` 修饰符来告诉 Vue 监听原生事件。 例如，假设我们有一个自定义组件 `MyButton`： ```vue <template> <button @click="onClick">Click me</button> </template> <script> export default { methods: { onClick() { this.$emit('click'); } } }; </script> ``` 这个组件封装了一个 `click` 事件，并通过 `$emit` 方法触发了该事件。如果我们在使用该组件时需要监听原生的 `click` 事件，就可以使用 `.native` 修饰符来实现： ```vue <template> <div> <my-button @click.native="onNativeClick"></my-button> </div> </template> <script> import MyButton from './MyButton.vue'; export default { components: { MyButton }, methods: { onNativeClick() { console.log('Native click event'); } } }; </script> ``` 在上面的代码中，我们在 `my-button` 组件上使用了 `.native` 修饰符来监听原生的 `click` 事件，并在组件外部定义了一个 `onNativeClick` 方法来处理该事件。这样，当用户点击 `my-button` 组件时，就会触发原生的 `click` 事件，并调用 `onNativeClick` 方法。 需要注意的是，`.native` 修饰符只能用于组件自定义事件的监听，不能用于原生 DOM 事件的监听。如果需要监听原生 DOM 事件，应该直接在模板中使用原生的事件监听器，例如 `@click`、`@input` 等。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值