在父子组件嵌套的时候，在子组件上使用@click和@click.native的区别

最新推荐文章于 2023-09-06 18:11:00 发布
最新推荐文章于 2023-09-06 18:11:00 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44309374/article/details/106048826
版权

 

/**

 * 在子组件上使用 @click 的时候没有效果，表示的是给子组件传递了一个自定义的方法，方法的名字叫做click，需要触发父组件的方法条件是需要在子组件中使用this.$emit('click')触发

 * @click.native 可以给原生的子组件绑定一个父组件的方法，这样就不需要子组件$emit触发，所以使用@click.native可以直接触发父组件中的方法

 */

 

 

 

 

 

希文Gershwin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件的嵌套的示例代码
08-29
本篇文章主要介绍了vue父子组件的嵌套的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Angular 2父子组件数据传递之@Input和@Output详解 (上)
08-30
主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。
记录--@click和@click.native有什么区别，如何阻止第三方组件内部的冒泡
最新发布
林恒的博客
09-06 3163
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一.@click和@click.native的区别 vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效(监听根元素的原生事件，使用 .native 修饰符) 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click...
@click.native和@click的区别？
越是安静内敛的人，越容易生不惊人死不休
05-11 1844
使用@click点击事件不生效、使用@click.native才生效是为啥？
@click和@click.native
FAmanyou的博客
04-16 6722
如果是普通的html，使用@click就可以触发。 如果使用组件和路由，在router-link标签中就需要使用@click.native。不然就只会跳转而不会触发事件。
vue @click和 @click.native.prevent 区别
Z_Gleng的博客
04-10 1818
@click是用在按钮上的语法糖 而@click.native是给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件 prevent是用来阻止默认的事件。就相当于…event.preventDefault()，父组件想在子组件上监听自己的click的话，需要加上native修饰符。 这里说说默认事件 默认事件就是默认执行的事件，比如a标签，点击a标签，页面会自动跳转 ...
vue @click.native
热门推荐
学习记录
07-05 2万+
1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）2，等同于在自组件中：   子组件内部处理click事件然后向外发送click事件：$emit("click".fn)...
看了就会的vue组件通讯，父传子 子传父 兄弟相传
iseyre的博客
12-28 518
为什么要使用组件 我们常常把一些能重复利用的内容封装成组件，这样大大提高了效率避免了不必要的重复。 比如在写页面中：很多页面都会出现按钮、输入框等等，往往样式一模一样，我们就可以把这些封装成组件，谁用的到谁直接调用就行 组件通讯 vue中组件之间的传递又被成为组件通讯。 父传子： 1、在父组件的子组件标签上绑定一个自定义属性 ， :自定义属性名='要传递的数据'，如下： 2、在要接收的子组件data同级，通过props来接收 有两种方法： 方法（1）：props:['自定义属...
Day13--自定义组件-封装自定义属性和click事件
qq_59110215的博客
11-26 517
卷
vue.js $refs和$emit 父子组件交互的方法
10-18
本篇文章主要介绍了vue.js $refs和$emit 父子组件交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.js使用v-model实现父子组件间的双向通信示例
10-15
主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下
Angular 2父子组件数据传递之@ViewChild获取子组件详解
08-30
主要给大家介绍了关于Angular 2父子组件数据传递之@ViewChild获取子组件的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定参考学习价值，需要的朋友们下面来一起看看吧。
vue的非父子组件的传值详细解析
xiaonanhaijing的博客
10-28 298
首先我们看一张图 图上 看上图 我们应该如何做 是不是感觉很麻烦? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src='./vue.js'></script> </head> &.
vue如何给自己封装好的组件加click事件(marksheng)
Mark Sheng的博客
03-23 998
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符 当你使用 <Menu>组件时 <Menu mode="horizontal" theme="dark" :active-name="$route.path" > <MenuItem name="/" to="/" @click.native="handclick(1)">...
vue中使用import路由懒加载的原理、import和require的区别
希文Gershwin
09-17 1万+
import和require的区别 node编程中最重要的思想就是模块化，import和require都是被模块化所使用。 遵循规范 require是 AMD规范引入方式 import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法 调用时间 require是运行时调用，所以require理论上可以运用在代码的任何地方 import是编译时调用，所以必...
vue中的父组件及子组件生命周期的执行顺序
希文Gershwin
03-16 7574
一、没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→父组件mounted; 二、当用v-show来控制子组件显示与隐藏的时候: 1.当用v-show='show',当show的默认值为true,执行顺序同上; 2.当用v-if='sh...
vue项目中使用webpack多页面开发和代码分割chunk
希文Gershwin
11-04 6611
webpack的一些基本解释 webpack是一个打包工具: 什么是打包呢? 打包就是把源代码经过一系列处理输出为最终代码的过程,webpack官网封面就解释的很好 什么是chunk（1） chunk就是打包成的一个个的块 我们以前用jquery之类的开发的时候,我们的js，css等文件都是单独引入的，比如下面的代码 <link rel="stylesheet" href="./bootstrap.css"> <link rel="stylesheet" href="./boot
vue 省市区三级联动 antd 级联组件 Cascader
希文Gershwin
01-08 6537
需求 与 功能 该功能实现了中国内的省市区的三级联动，基于 antd-vue 中的 Cascader 做的组件，支持原有的所有功能 效果展示 支持联想搜索 支持显示部分省份 例子（本例子是基于 antd 做的，在 element-ui，或者是 iview 中，同样适用） <template> <AreaCascader v-model="data1" /> </template> API 下面只列出了在本插件中二次封装添加的新字段，和部分原有 antd-v
js(vue) 判断如何scroll滚动条开始，停止滚动？
希文Gershwin
12-02 5172
最近接到了一个需求，滚动隐藏元素，停止显示，需要在页面中判断滚动开始和结束。使用纯原生的方法我们可以判断出滚动开始和结束，但是还是有些繁琐的。恰巧我的项目是vue的，便利用vue中的watch（侦听器）实现了这一功能，今天就以垂直滚动为例，分享一下实现方法。代码如下： export default { data() { return { ...
组件复用的意思是?如何在父组件中使用子组件？父子组件怎么传值？
07-13
在 Vue 中，可以在父组件中使用子组件，实现组件的嵌套和复用。要在父组件中使用子组件，需要先在父组件的模板中引入子组件，并在组件选项中注册子组件。 首先，在父组件的模板中，使用子组件的标签进行引入。例如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值