vue.js:634 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on

最新推荐文章于 2023-01-05 12:15:06 发布
最新推荐文章于 2023-01-05 12:15:06 发布
阅读量8.6k 收藏 4
点赞数 3
分类专栏： 报错 vue成长中 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53295102/article/details/118495847
版权

事件的native修饰符只能在组件上使用，原生的html标签是不能使用的，这是因为我在div标签使用了native修饰符，所以把.native删掉就好啦

注意：你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

就是：在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。     

可以理解为该修饰符的作用就是：把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。

我的理解是:里面的组件要使用vue的触发事件（@click）要加.native

梦的彼岸岁月如歌
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对Vue.js之事件的绑定(v-on: 或者 @ )详解
10-18
今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue报错解决：The .native modifier for v-on is only valid on components but it was used on ＜input＞
热门推荐
zhangyubababa的博客
12-21 2万+
The .native modifier for v-on is only valid on components but it was used on 事件的native修饰符只能在组件上使用，原生的html标签是不能使用的，这是因为我在input标签使用了native修饰符。
vue-fullpage.js：fullPage.js的官方Vue.js包装器http：alvarotrigo.comvue-fullpage
02-06
Vue-fullpage.js 官方Vue.js包装器。 | 通过 。 感谢 ， 和 目录 安装 终奌站： // With bower bower install vue-fullpage.js // With npm npm install --save vue-fullpage.js 执照 非开源许可证 如果要使用vue-fullpage开发非开源站点，主题，项目和应用程序，则商业许可是适当的许可。 使用此选项，您的源代码将保持专有。 这意味着，您不必将整个应用程序的源代码更改为开放源代码许可证。 。 开源许可证 如果要在与兼容的许可证下创建开源应用程序，则可以根据GPLv3的条款
浅谈Vue.js 组件中的v-on绑定自定义事件理解
10-18
主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解vue.js的事件处理器v-on:click
10-19
本篇文章主要介绍了详解vue.js的事件处理器v-on:click，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue @click.native
weixin_44866262的博客
05-25 656
vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） @click.native 是给组件绑定原生事件，只能用在组件上，不可以用在原生元素上。异常信息： [Vue warn]: The .native modifier for v-on is only valid on components but it was used on . 2，等同于在自组件中： 子组件内部处理click事件然后
Vue的学习（四）
zyyyy20的博客
03-13 520
Vue的学习（四） v-on:的深入了解 事件修饰符 .once 只执行一次 .prevent 提交事件不再重载页面，阻止默认事件 .stop 阻止事件扩散，即阻止冒泡 .capture 捕获点击事件，改变冒泡顺序 .self 该修饰符可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行 .passive 关于.passive修饰符 vue官方文档是这样介绍的： .passive 会告诉浏览器你不想阻止事件的默认行为。 在vue中，不阻止默认事
Vue源码：vue实例挂载篇
老司机的后备箱
06-28 2160
在new一个Vue对象的时候，内部究竟发生了什么？Vue的构造类只做了一件事情，就是调用_init函数进行初始化。 2._init，初始化 _init主要做了这两件事： initData 首先判断data是不是函数，如果是函数的话执行getData。getData做的事情很简单：，因为vue推荐我们把data定义为一个函数然后返回具体的data对象，因此getData只需执行一次data拿到返回值即可。 判断是否与props属性名冲突，然后将data挂载到vue实例中。这里是通过proxy对vue实例的g
js createelement_Vue.js源码分析-虚拟DOM
weixin_39530647的博客
11-20 146
vue微信H5项目中遇到的问题
weixin_42091247的博客
03-11 1395
1.跳转页面，页面数据刷新路由不变化 这种情况使用$route无法获取到当前页面路由传递的参数 解决方案：通过window.location.href获取当前的url进行拼接跳转 this.$router.replace({path: "/pinPage?"+this.GetQueryString('type')}); Methods:{ GetQ.........
vue.js中v-on:textInput无法执行事件问题的解决过程
10-19
大家都知道vue.js通过v-on完成事件处理与绑定，但最近使用v-on的时候遇到了一个问题，所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程，需要的朋友可以参考下。
Vue 进阶 [九] Vue 源码剖析03 模板编译 & 组件化机制
Sandy_zhi的博客
10-20 248
业精于勤 荒于嬉 模板编译 概述 模板编译的主要目标是将模板（template）转换为渲染函数（render） template => render() 模板编译的必要性 Vue 2.0 需要用到VNode 描述视图以及各种交互，手写显然不切实际，因此用户需要编写类似HTML 代码的Vue模板，通过编译器将模板转换为可返回VNode 的 render 函数。 整体流程 如果用户设置了template 或者是el 选项，最终就会执行编译函数，compileToFuncti...
2021-04-08
fvbxjnch的博客
04-08 121
Vue @click.native 的使用 1.首先， @click.native 是给组件绑定原生事件，只能用在组件上，不可以用在原生元素上。 异常信息： [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <button>. 在组件上绑定@click="clickCpn"事件，click事件无法触发也不生效，需要通过使用@click.native=“clickC
Vue中虚拟DOM的理解
WindrunnerMax
08-02 724
Vue中虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点称为VNode，用对象属性来描述节点，实际上它是一层对真实DOM的抽象，最终可以通过渲染操作使这棵树映射到真实环境上，简单来说Virtual DOM就是一个Js对象，用以描述整个文档。 描述 在浏览器中构建页面时需要使用DOM节点描述整个文档。 <div class="root" name="root"> <p>1</p> <div>11&l
vuejs常用修饰符
letianxf的博客
01-05 1088
vuejs常用修饰符：.prop、 .native 、.sync ...
Vue源码解析之组件化（一）
messizhao的博客
11-25 1735
组件化 Vue.js 另一个核心思想是组件化。所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以嵌套。 我们在用 Vue.js 开发实际项目的时候，就是像搭积木一样，编写一堆组件拼装生成页面。在 Vue.js 的官网中，也是花了大篇幅来介绍什么...
发送网络请求出错vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in v-on handler (Promise/async)
zhouyuzhu666的博客
10-24 7494
错误代码如下 async categoryDelete(id){ const res = await get('/productCategory/deleteById',id) console.log(res); } 正确代码如下 async categoryDelete(id){ let data = { id:id } const res = await get('/productCategory/d.
Vue错误[Vue warn]: Invalid prop: type check failed for prop “data“. Expected Array, got String
普歌-高禄
09-15 1万+
Vue-常见错误[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got String 前言:项目中遇见 Invalid prop…Expected XXX, got XXX。像这样的错误一般是同一类型的错误，是数据类型没给对,你给的值和组件需要的数据类型不一致 错误截图 以上就是报错信息 错误分析 报错信息的意思是：无效的命名数据:“数据”类型检查失败。期望数组，得到字符串/对象， 已经很明
Part3-2-2 Vue.js 源码剖析-虚拟 DOM
m0_38066007的博客
07-10 171
1
The .native modifier for v-on is only valid on components but it was used on <i>.
最新发布
04-19
这是一个关于Vue.js框架中v-on指令使用方式的技术问题。具体来说，.native修饰符只能用于组件的v-on指令上，但它被应用在了<i>标签上。对于这个问题，可以给出解决方案或者对该修饰符的使用进行解释。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值