当前位置: 首页 > news >正文

Vue 2 处理边界情况

访问元素和组件

通过Vue 2 组件基础一文的学习,我们知道组件之间可以通过传递props事件来进行通信。

但在一些情况下,我们使用下面的方法将更有用。


1.访问根实例

根实例可通过this.$root获取。

我们在所有子组件中都可以像上面那样访问根实例,它就像一个vuex中的全局store

这样我们可以在根实例上定义方法和属性,这些方法和属性可以在所有组件中访问。

根实例也可以用作事件总线,你可以触发根实例上的自定义事件,在其他组件上监听这些事件以进行通信。一个示例如下:

<!DOCTYPE html>
<html><head><title>Vue 事件总线</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><button @click="sendMessage">Send Message By Root</button><child-component></child-component></div><script>//  注册组件Vue.component('child-component', {data: function () {return {childMessage:'childMsg'}},template: `<div><p>Message in ChildComponent:{{childMessage}}</p></div>`,created(){//通过 this.$root 监听`message-sent`事件this.$root.$on('message-sent',message=>{this.childMessage=message})}});var vm = new Vue({el: '#app',data:{message:'rootMsg'},methods:{sendMessage(){//在根实例上触发自定义事件'message-sent'this.$emit('message-sent',this.message)}}});</script>
</body></html>
<script>

在这里插入图片描述


2.访问父组件实例、访问子组件实例或子元素

之前我们可以通过传递prop来达到 子组件访问父组件实例 或者称为 父组件向子组件传值 的目的。

现在我们可以使用$parent property来访问父级组件实例。

之前我们也通过触发自定义事件传递抛出值的方式来访问子组件实例。

同样的,我们可以通过ref attribute为子组件或子元素添加一个ID引用。

<child-component ref="child"></child-component>

于是可以使用this.$refs.child来访问子组件实例。

通过ref引用子组件示例:

<!DOCTYPE html>
<html><head><title>Vue ref 示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><button @click="toggleColor">Toggle Color</button><p :style="{ color: textColor }">This text color can be toggled.</p><child-component ref="childRef"></child-component></div><script>// 子组件Vue.component('child-component', {template:`<div><p>This is a child component.</p></div>`,methods: {sayHello() {console.log('Hello from child component!');}}});var vm = new Vue({el: '#app',data: {textColor: 'black',isChildVisible: true},methods: {toggleColor() {this.textColor = this.textColor === 'black' ? 'red' : 'black';// 通过 ref 访问子组件实例中的方法this.$refs.childRef.sayHello();}}});</script>
</body></html>

在这里插入图片描述


3.依赖注入

不管是this.$parentthis.$refs,都可能会陷入深层嵌套的风险,我们可能会通过this.$parent.$parent.$parent来访问上层某个组件实例。这无疑是不合理的。

针对较深层级的组件访问,Vue设计了依赖注入的模式。它允许我们将一个依赖注入到某个组件里,以便组件可以访问这个依赖而不需要显示传递它。这对于共享全局配置或服务非常有用,例如国际化(i18n)配置、数据请求服务等。

具体的,我们通过在父组件provide选项提供依赖,然后在子组件的inject选项注入依赖。

示例:

//在父组件中
provide:{userSevice:new UserService()
}//在子组件中
inject:['userService'],
created(){this.userService.doSomething()
}

为什么我们不使用$root实现这种方案呢?我认为,依赖注入适合小范围的配置共享,而全局共享则适用于$root

程序化的事件监听器

$emit触发的事件可以被v-on监听,但这不是我们这章的内容。

本文主要介绍 Vue 2 中程序化的事件监听器,我们可以使用它来动态地添加和删除事件监听器。

Vue实例上有一系列方法来处理事件,包括$on$once$off。它们都包含两个参数:eventNameeventHandler$on侦听一个事件;$once只侦听一个事件一次;$off停止侦听一个事件。

$emit$on$off浏览器的EventTarget API dispatchEventaddEventListenerremoveEventListener并不等同。

$emit用于触发自定义事件,dispatchEvent用于触发各种DOM事件。addEventListenerremoveEventListener同理。

循环引用

1.递归组件

我们可以在组件模板内部调用自身,这称为递归组件。递归组件要注意设置递归终止条件,例如v-if的值为false。

假设我们有一个表示文件夹结构的数据对象:

<!DOCTYPE html>
<html><head><title>Vue 2 递归组件 Demo</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><recursive-folder :folder="folder"></recursive-folder></div><script>Vue.component('recursive-folder', {props: ['folder'],template: `<div><span>{{ folder.name }}</span><div v-if="folder.children.length > 0"><ul><li v-for="childFolder in folder.children" :key="childFolder.name"><recursive-folder :folder="childFolder"></recursive-folder></li></ul></div></div>`});var vm = new Vue({el: '#app',name: 'recursive-folder',data: {folder: {name: 'Folder A',children: [{name: 'Subfolder A.1',children: [{name: 'File A.1.1',children: []},// 可能有更多子项]},{name: 'File A.2',children: []},// 可能有更多子项]}},});</script>
</body></html>

在这里插入图片描述


2.循环组件

循环组件是不同组件互相使用,递归组件是自身使用自身

使用Vue.component全局注册组件时,Vue帮助我们自动解决组件之间的依赖关系,因此你可以随意使用它们。

但是,当我们使用模块系统(如Webpack)时,便可能出现循环依赖的情况。

为了解决该问题,你可以在组件的beforeCreate生命周期钩子函数中动态注册依赖组件,或者使用异步组件加载来确保组件能够正确解析和注册。

1)在组件的beforeCreate生命周期钩子函数中动态注册依赖组件:

beforeCreate(){this.$options.components.AnotherComponent=require("./another-component.vue").default
}

2)使用异步组件加载:

参考Vue 2 动态组件和异步组件一文。


模板定义的替代品

1.内联模板

相关文章:

Vue 2 处理边界情况

访问元素和组件 通过Vue 2 组件基础一文的学习&#xff0c;我们知道组件之间可以通过传递props或事件来进行通信。 但在一些情况下&#xff0c;我们使用下面的方法将更有用。 1.访问根实例 根实例可通过this.$root获取。 我们在所有子组件中都可以像上面那样访问根实例&…...

写一个mysql 正则表达式,每三个img标签图片后面添加<hr>

你可以使用MySQL的REGEXP_REPLACE函数来实现这个需求。下面是一个示例的正则表达式和SQL语句&#xff1a; sql UPDATE your_table SET your_column REGEXP_REPLACE(your_column, (<img[^>]*>){3}, $0<hr>) WHERE your_column REGEXP (<img[^>]*>){3}…...

Spring MVC异常处理

Spring MVC异常处理 Spring MVC异常处理机制HandlerExceptionResolver的实现类DefaultHandlerExceptionResolver实现类DefaultHandlerExceptionResolver 在Controller的请求处理方法中手动使用try…catch块捕捉异常&#xff0c;当捕捉到指定的异常时&#xff0c;系统返回对应的…...

Centos7安装docker后默认开启docker0的网卡|卸载默认网卡

docker实战(一):centos7 yum安装docker docker实战(二):基础命令篇 docker实战(三):docker网络模式(超详细) docker实战(四):docker架构原理 docker实战(五):docker镜像及仓库配置 docker实战(六):docker 网络及数据卷设置 docker实战(七):docker 性质及版本选择 认知升…...

04_Redis与mysql数据双写一致性案例

04——redis与mysql数据双写一致性 一、canal 是什么 canal[ka’nel,中文翻译为水道/管道/沟渠/运河&#xff0c;主要用途是用于MySQL数据库增量日志数据的订阅、消费和解析&#xff0c;是阿里巴巴开发并开源的,采用Java语言开发&#xff1b; 历史背景是早期阿里巴巴因为杭州和…...

vue的开发者工具下载『保姆级别』

1.先进官网 极简插件_Chrome扩展插件商店_优质crx应用下载 (zzzmh.cn) 2.搜索vue devtools&#xff0c;点击进去 3.下载插件 4.下载到文件下你自己的文件下&#xff1a;我的是下载到E盘下。 5.压缩到当前目录下 6.电脑进入拓展程序&#xff08;不同的浏览器操作不同&#xff…...

vue的scrollTop手机环境设置值失效,本地正常可以赋值

获取div盒子ref或者document获取都行 监听方法 一定要加this.$nexttick,在本地测试只用nexttick是没有问题的&#xff0c;但是到手机测试就不行了&#xff0c;原因是因为手机渲染比本地更快&#xff0c;所以结合setTimeout使用 如果有更好的处理方法&#xff0c;恳请大佬指点一…...

[前端系列第7弹]Vue:一个渐进式的 JavaScript 框架

Vue 是一个用于构建用户界面的 JavaScript 框架&#xff0c;它具有以下特点&#xff1a; 渐进式&#xff1a;Vue 可以根据不同的使用场景&#xff0c;灵活地选择使用库或者框架的方式&#xff0c;从而实现渐进式的开发。响应式&#xff1a;Vue 通过数据绑定和虚拟 DOM 技术&am…...

C#键盘按键对应Keys类大全

...

SpringBoot 学习(03): 弱语言的注解和SpringBoot注解的异同

弱语言代表&#xff1a;Hyperf&#xff0c;一个基于 PHP Swoole 扩展的常驻内存框架 注解概念的举例说明&#xff1b; 说白了就是&#xff0c;你当领导&#xff0c;破烂事让秘书帮你去安排&#xff0c;你只需要批注一下&#xff0c;例如下周要举办一场活动&#xff0c;秘书将方…...

CloudQuery:更好地管理你的 OceanBase 数据库

前言&#xff1a;作为 OceanBase 的生态合作伙伴&#xff0c;CloudQuery&#xff08;简称“CQ”&#xff09; 最新发布的社区版 2.2.0 新增了 OceanBase 数据库&#xff0c;为企业使用 OceanBase 数据库提供全面的支持。包括连接与认证、查询与分析、数据安全与权限管理&#x…...

php的password_verify 和 password_hash密码验证

password_hash() 使用足够强度的单向散列算法创建密码的散列(hash)。 当前支持的算法&#xff1a; PASSWORD_DEFAULT - 使用 bcrypt 算法 (PHP 5.5.0 默认)。 注意&#xff0c;该常量会随着 PHP 加入更新更高强度的算法而改变。 所以&#xff0c;使用此常量生成结果的长度将在未…...

JAVA免杀学习与实验

1 认识Webshell 创建一个JSP文件&#xff1a; <% page import"java.io.InputStream" %> <% page import"java.io.BufferedReader" %> <% page import"java.io.InputStreamReader" %> <% page language"java" p…...

Apche Kafka + Spring的消息监听容器

目录 一、消息的接收1.1、消息监听器 二、消息监听容器2.1、 实现方法2.1.1、KafkaMessageListenerContainer2.1.1.1、 基本概念2.1.1.2、如何使用 KafkaMessageListenerContainer 2.1.2、ConcurrentMessageListenerContainer 三、偏移 四、监听器容器自动启动 一、消息的接收 …...

[JavaWeb]【五】web后端开发-Tomcat SpringBoot解析

目录 一 介绍Tomcat 二 基本使用 2.1 解压绿色版 2.2 启动TOMCAT 2.3 关闭TOMCAT 2.4 常见问题 2.5 修改端口号 2.6 部署应用程序 三 SpringBootWeb入门程序解析 前言&#xff1a;tomcat与SpringBoot解析 一 介绍Tomcat 二 基本使用 2.1 解压绿色版 2.2 启动TOMCAT 2…...

css 用过渡实现,鼠标离开li时,背景色缓慢消息的样式

要实现鼠标悬停时背景颜色变为黄色&#xff0c;鼠标离开时背景颜色慢慢消失并变回白色的效果&#xff0c; 可以使用CSS的过渡&#xff08;transition&#xff09;属性 li {background: #fff;color: #000;transition: background 0.5s ease-out; }li:hover {background: #fbb31…...

pytorch 线性层Linear详解

线性层就是全连接层&#xff0c;以一个输入特征数为2&#xff0c;输出特征数为3的线性层为例&#xff0c;其网络结构如下图所示&#xff1a; 输入输出数据的关系如下&#xff1a; 写成矩阵的形式就是&#xff1a; 下面通过代码进行验证&#xff1a; import torch.nn as nn …...

LeetCode 833. 字符串中的查找与替换

2235. 两整数相加 添加链接描述 给你两个整数 num1 和 num2&#xff0c;返回这两个整数的和。 示例 1&#xff1a; 输入&#xff1a;num1 12, num2 5 输出&#xff1a;17 解释&#xff1a;num1 是 12&#xff0c;num2 是 5 &#xff0c;它们的和是 12 5 17 &#xff0c;…...

Oracle故障案例之-19C时区补丁DSTV38更新

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61…...

设计模式之组合模式(Composite)的C++实现

1、组合模式的提出 在软件开发过程中&#xff0c;使用者Client过多依赖所操作对象内部的实现结构&#xff0c;如果对象内部的实现结构频繁发生变化&#xff0c;则使用者的代码结构将要频繁地修改&#xff0c;不利于代码地维护和扩展性&#xff1b;组合模式可以解决此类问题。组…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...