Vue组件点击事件不触发的问题,添加事件修饰符native解决

目录

一、父组件在子组件上绑定方法,点击不触发

.native是什么?

二、其他事件修饰符

.stop

.prevent

.capture

.self

.once

.passive

三、子组件触发父组件方法

四、父组件调用子组件方法



一、父组件在子组件上绑定方法,点击不触发

  • 点击事件不生效
<template><div class="home"><HelloWorld ref="helloWorld" @click="onClick" msg="Welcome to Your Vue.js App" /></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',components: {HelloWorld},mounted() {},methods: {//这里不触发onClick(){console.log("我是父组件方法!")}}
}
</script>
  • 添加事件修饰符native
<template><div class="home"><HelloWorld ref="helloWorld" @click.native="onClick" msg="Welcome to Your Vue.js App" /></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',components: {HelloWorld},mounted() {},methods: {//这里可以触发了onClick(){console.log("我是父组件方法!")}}
}
</script>

关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。

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

给普通的标签加事件,然后加native是无效的,onclick事件不会触发!

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


二、其他事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

.stop


阻止单击事件继续传播

<a v-on:click.stop="doThis"></a>
.prevent


阻止默认事件,提交事件不再重载页面

<form v-on:submit.prevent="onSubmit"></form>
.capture


实现捕获阶段的事件处理

<div v-on:click.capture="doThis">...</div>


事件的触发过程可以分为三个阶段:捕获阶段、目标阶段和冒泡阶段。目标阶段是指事件恰好发生的地方,而冒泡阶段则是从目标元素开始向父级元素逐一传播事件。捕获阶段则是在事件到达目标元素之前从根节点逐渐传递到目标元素。

在默认情况下,Vue绑定的事件处理函数是在冒泡阶段执行的。但是我们有时候需要在捕获阶段执行事件处理函数。这时候我们就可以使用事件修饰符.capture来实现这一功能。


.self


事件不是从内部元素触发的

<div v-on:click.self="doThat">...</div>
.once


点击事件将只会触发一次

<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。

.passive


不想阻止事件的默认行为
这个 .passive 修饰符尤其能够提升移动端的性能。


 

<div v-on:scroll.passive="onScroll">...</div>

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。


三、子组件触发父组件方法

  • 子组件
<template><div class="hello"><h1>{{ msg }}</h1><button type="button" @click="onChange">点击</button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},methods:{//这里触发父组件方法onChange(){this.$emit('onParentFn')}}
}
</script>
  • 父组件
<template><div class="home"><HelloWorld ref="helloWorld" @onParentFn="parentFn" msg="Welcome to Your Vue.js App" /></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',components: {HelloWorld},mounted() {},methods: {//这里是父组件的方法parentFn() {console.log("我是父组件方法!")}}
}
</script>

四、父组件调用子组件方法

  • 父组件
<template><div class="home"><HelloWorld ref="helloWorld" msg="Welcome to Your Vue.js App" /></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',components: {HelloWorld},mounted() {//这里是父组件调用子组件方法this.$refs.helloWorld.childFn()},methods: {}
}
</script>
  • 子组件
<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},methods:{//这里是子组件动方法childFn(){console.log("我是子组件方法!")}}
}
</script>


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常见の算法

前言本文主要使用Java 什么&#xff0c;是快乐星球#&#xffe5;%……什么是算法&#xff1f; 算法是一组完成任务的指令。任何代码片段都可视为算法&#xff0c;但我们主要介绍常见算法 一、引入——二分查找 二分查找是一种算法&#xff0c;其输入是一个有序的元素列表。如…

java获取一段音频/mp3的时长

引言 在日常开发中&#xff0c;经常会遇到产品经理提出一个需求“上传音乐/音频”&#xff0c;而且还得显示出音频的播放时长。那我们直接世界上最简单的实现方案&#xff0c;必须是最简单&#xff0c;多一句啰嗦不准点赞。 How to do 1.提前引入包 <!--视频多媒体工具包…

浏览器实用:禁止浏览器http自动转成https

前言 因为有些网站支持http和https两种协议访问&#xff0c;有些只支持一种协议访问。但根据动态域名安全策略&#xff08;HSTS&#xff09;&#xff0c;只要该域名在浏览器中访问过一次https&#xff0c;那么浏览器将强制使http的请求变为https。 虽然这条浏览器的策略有利于提…

【oshi-core依赖】Java获取计算机的内存信息、磁盘信息、CPU信息

这篇文章,主要介绍Java如何获取计算机内存信息、磁盘信息、CPU信息【知识星球】。 目录 一、获取系统信息 1.1、引入依赖 1.2、SystemInfo类

Flink入门教程

使用flink时需要提前准备好scala环境 一、创建maven项目 二、添加pom依赖 <properties><scala.version>2.11.12</scala.version></properties><dependency><groupId>org.scala-lang</groupId><artifactId>scala-library<…

【蓝桥备赛】最大数组和——前缀和

题目链接 最大数组和 个人思路 一个需要简单操作的前缀和数组&#xff0c;因为需要对价值最大的宝石和价值最小的宝石进行操作&#xff0c;所以肯定少不了进行一个排序。然后&#xff0c;可能就有人想要不使用双指针进行处理&#xff0c;如果最小的两个数之和大于最大的数&a…

携程基于Jira Cloud的敏捷项目管理实践

好的工具可以满足团队在各个成长阶段的管理诉求 实践一&#xff1a;对齐目标/团队OKR/多团队协作战略项目 实践二&#xff1a;以产品为中心的协作框架 实践三&#xff1a;交付团队管理 实践四&#xff1a;和海外子公司对齐&#xff0c;协作

在linux、window环境搭建kafka环境

一、搭建环境前置准备 下载kafka的官网 http://kafka.apache.org/downloads根据自己的需求选择版本,安装包不区分linux和windows环境,这一个安装包均可部署。 源代码包含kafka的代码文件,使用scala编写的。 二、linux环境 1. 上传安装包 我下载的版本是kafka_2.12-3.6.1…

09.Elasticsearch应用(九)

Elasticsearch应用&#xff08;九&#xff09; 1.搜索结果处理包括什么 排序分页高亮返回指定字段 2.排序 介绍 Elasticsearch支持对搜索结果排序&#xff0c;默认是根据相关度算分来排序 支持排序的字段 keyword数值地理坐标日期类型 排序语法 GET /[索引名称]/_sear…

网络协议与攻击模拟_08DHCP协议

技术学习要了解某项技术能干什么&#xff1f;它的详细内容&#xff1f;发展走向&#xff1f; 一、DHCP协议 1、DHCP基本概念 dhcp动态主机配置协议&#xff0c;广泛应用于局域网内部 主要是为客户机提供TCP/IP 参数&#xff08;IP地址、子网掩码、网关、DNS等&#xff09;…

5G赋能智慧文旅:科技与文化的完美结合,打造无缝旅游体验,重塑旅游业的未来

一、5G技术&#xff1a;智慧文旅的强大引擎 5G技术的起源可以追溯到2010年&#xff0c;当时世界各国开始意识到4G技术已经达到了瓶颈&#xff0c;无法满足日益增长的移动通信需求。2013年&#xff0c;国际电信联盟&#xff08;ITU&#xff09;成立了5G技术研究组&#xff0c;开…

超融合系统疑难故障定位与解决实践 3 例(含信创技术栈)

当 IT 系统出现故障&#xff0c;问题定位往往是运维人员最头疼的环节。尤其是超融合系统&#xff0c;由于整体涉及的技术栈比较复杂&#xff0c;且有越来越多的用户基于信创环境进行部署&#xff0c;非常考验厂商和技术人员的专业能力&#xff1a;厂商研发和售后工程师不仅应能…

[pytorch入门] 6. 神经网络

基本介绍 torch.nn&#xff1a; Containers&#xff1a;基本骨架Convolution Layers&#xff1a; 卷积层Pooling layers&#xff1a;池化层Non-linear Activations (weighted sum, nonlinearity)&#xff1a;非线性激活Normalization Layers&#xff1a;正则化层 Container…

一文讲透Excel数据如何导入到Stata?

推荐采用《Stata统计分析从入门到精通》 杨维忠、张甜 清华大学出版社“1.2.6 导入其他格式的数据文件” 的解答。 在Stata主界面选择“文件|导入”命令&#xff08;如图所示&#xff09;&#xff0c;即可看到Stata支持的其他格式的数据文件类型&#xff0c;包括Excel电子表格…

【收藏】幻兽帕鲁创建服务器教程

创建幻兽帕鲁服务器1分钟部署教程&#xff0c;阿里云和腾讯云均推出幻兽帕鲁服务器服务器和部署教程&#xff0c;4核16G和4核32G配置可选&#xff0c;阿腾云atengyun.com分享1分钟自建幻兽帕鲁Palworld服务器教程&#xff1a; 幻兽帕鲁服务器创建教程 幻兽帕鲁服务器官方推荐…

如何在 Linux 上安装 Docker?最权威指南来了!

docker文档&#xff1a;https://docs.docker.com/engine/ 打开docker文档 这里需要注意&#xff0c;服务器上一般是没有界面的&#xff0c;我们只需要安装docker Engine。 卸载历史版本 这一步是可选的&#xff0c;如果之前安装过旧版本的Docker&#xff0c;可以使用如下命令…

openssl3.2 - linux脚本(.sh)调用openssl命令行参数的简单确认方法

文章目录 openssl3.2 - linux脚本(.sh)调用openssl命令行参数的简单确认方法概述笔记修改openssl实现的前置条件修改debian12.4下编译好的openssl实现, 将入口参数记录下来测试效果备注补充 - 将管道文件记录到本地文件效果备注补充 - 要考虑到管道的读bug_fix - 补充-extfile时…

[RK-Linux] 移植Linux-5.10到RK3399(十)| 配置AP6256模组使能WIFI、BT功能

手上 ROC-RK3399-PC Pro 使用蓝牙 WIFI 模组是 AP6256。 一、AP6256 模组介绍 AP6256是正基科技(AMPAK)推出的一款低成本、低功耗的双模模块,它集成了Wi-Fi和蓝牙功能。这款模块支持SDIO接口,具有以下特点: 1、型号:AP6256 2、接口:SDIO(Secure Digital Input/Outp…

图像旋转角度计算并旋转

#!/usr/bin/python3 # -*- coding: utf-8 -*- import cv2 import numpy as np import timedef Rotate(img, angle0.0,fill0):"""旋转:param img:待旋转图像:param angle: 旋转角度:param fill&#xff1a;填充方式&#xff0c;默认0黑色填充:return: img: 旋转后…

《幻兽帕鲁》32人专有服务器设置教程,亲测稳定

创建幻兽帕鲁服务器1分钟部署教程&#xff0c;阿里云和腾讯云均推出幻兽帕鲁服务器服务器和部署教程&#xff0c;4核16G和4核32G配置可选&#xff0c;阿腾云atengyun.com分享1分钟自建幻兽帕鲁Palworld服务器教程&#xff1a; 幻兽帕鲁服务器创建教程 幻兽帕鲁服务器官方推荐…