Vue组件的边界情况

01.$root;

访问组件的根实例;用的不多,基本上在vuex上进行数据操作;

02.$parent/$children;

可以获得父组件或者子组件上边的数据;一般不建议使用$parent,因为如果获取这个值进行修改的话,也会更改父组件上边的数据;

<template><div>//相当于使用了爷组件上边title属性的值{$parent.$parent.title}<button @click="$parent.$parent.handle">调用爷组件上边的方法</button></div>
</template>

03.$refs;

这个也可以获取到子组件上边的数据;在el组件中我们可以通过这个来进行验证数据;

this.$refs[formname].validate((valid)=>{if(valid){console.log('success');}else{console.log('fail')return false;}})

//这是子组件
<tempalte>
<div><input v-model="input" type="text" ref="txt">
</div></template>export default{data(){return{input:''
}},methods:{fucus(){this.$refs.txt.focus()}}}

<template><div><niu ref="hao"/><button @click="huo">获取焦点</button></div>
</template>import niu from './niu.vue'export default{components:{niu
},
methods:{huo(){this.$refs.hao.focus();this.$refs.hap.value = '牛啊牛'}}}

04.provide、inject

嵌套比较多的情况下子组件使用这个好用

//父组件export default{provide:{return:{title:this.title,message:this.message}},methods:{message(){return this.title}}}

//子组件  获得title变量以及message的方法export default{inject:['title','message']}

05.$attrs

把父组件中非props属性绑定到内部组件(不包含style,class属性)

//子组件<template><div><input  v-bind="$attrs"></div></template>export default{inheritAttrs:false}

 

06.$listeners

 把组件中DOM对象的原生事件绑定到内部组件

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

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

相关文章

VUE3组件

组件基础 {#components-basics} 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对每个部分进行单独的思考。在实际应用中&#xff0c;组件常常被组织成层层嵌套的树状结构&#xff1a; 这和我们嵌套 HTML 元素的方式类似&#xff0c;Vue 实现了自己的组件…

《使用 VMware 在 Windows 上搭建 Linux 系统的完整指南》

《使用 VMware 在 Windows 上搭建 Linux 系统的完整指南》 1、准备工作1.1 安装 VMware 软件1.2 下载 Linux 发行版镜像文件1.3 安装SSH工具 2、创建新的虚拟机2.1 VMware页面2.2 打开VMware页面并点击创建新的虚拟机&#xff0c;选择自定义2.3 选择系统兼容性&#xff0c;默认…

微信小程序读取本地json

首先在项目录下新建【server】文件夹&#xff0c;新建data.js文件&#xff0c;并定义好json数据格式。如下&#xff1a; pages/index/index.ts导入data.js并请求json pages/index/index.wxml页面展示数据

Vue关闭语法检查

在创建项目的时候&#xff0c;如果不小心开启了 eslint 语法检查&#xff0c;就会导致页面经常报错。 eslint 是一个 JavaScript 的效验插件&#xff0c;用来效验语法和代码的书写风格。 eslint 可以规范开发人员的代码。但是有些像缩进、空格、空行之类的规范&#xff0c;在…

PHP实践:分布式场景下的Session共享解决方案实现

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…

[gdc]Rendering ‘God of War Ragnark‘

gdc23&#xff0c; sony santa monica关于god of war的分享&#xff1b; back ground 作者stephen mcauley现在是santa monica的technical director&#xff1b;20年加入santa monica&#xff0c;作为rendering lead&#xff0c;有9年的经验&#xff0c;之前在ubisoft montre…

虹科方案 | 成都大运会进行时,保障大型活动无线电安全需要…

成都大运会 7月28日&#xff0c;备受关注的第31届世界大学生夏季运动会在成都正式开幕。据悉&#xff0c;这是全球首个5G加持的智慧大运会&#xff0c;也是众多成熟信息技术的综合“应用场”。使用基于5G三千兆、云网、8K超高清视频等技术&#xff0c;在比赛现场搭建多路8K摄像…

Java“牵手”根据关键词搜索(分类搜索)淘宝商品列表页面数据获取方法,淘宝API实现批量商品数据抓取示例

淘宝天猫商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取淘宝商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问淘宝商城的网页来获取商品详情信息。以下是两种常用方法的介绍…

STM32 LL库+STM32CubeMX--点亮板载LED

一、前期准备 硬件&#xff1a;STM32F103C8T6开发板调试工具&#xff1a;DAPLink(本次使用)或USB-TTL开发环境&#xff1a;STM32CubeMX、Keil、Vscode(可选)板载LED&#xff1a;PC13(低电平点亮) 二、STM32CubeMX配置 1.选择芯片型号&#xff1a; 2.配置外设时钟&#xff1a;…

Spring Cloud 智慧工地源码(PC端+移动端)项目平台、监管平台、大数据平台

智慧工地源码 智慧工地云平台源码 智慧建筑源码 “智慧工地”是利用物联网、人工智能、云计算、大数据、移动互联网等新一代信息技术&#xff0c;彻底改变传统建筑施工现场参建各方现场管理的交互方式、工作方式和管理模式&#xff0c;实现对人、机、料、法、环的全方位实时监…

redis SortedSet类型命令

Redis中的Sorted Set&#xff08;有序集合&#xff09;是一种有序的、不重复的数据结构。Sorted Set中的每个成员都与一个分数&#xff08;score&#xff09;关联&#xff0c;通过分数可以对成员进行排序。以下是Redis中Sorted Set类型的一些常见命令&#xff1a; ZADD key [NX…

开启MySQL的binlog日志

1.判断MySQL是否已经开启binlog SHOW VARIABLES LIKE log_bin; 查看MySQL的binlog模式 show global variables like "binlog%";几个关于binlog常用的命令 #查看日志开启状态 show variables like log_%; #查看所有binlog日志列表 show master logs; #查看最新一个b…

【Linux】DNS协议——应用层

目录 DNS协议 DNS背景 域名简介 域名解析过程 使用dig工具分析DNS过程 DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&#xff0c;是一个用来将域名转化为IP地址的应用层协议。 DNS背景 TCP/IP中通过IP地址和端口号的方式&#xff0c;来确定网…

CAS服务端入门使用实践

CAS服务端入门使用实践 一、前言 1.简介 CAS 是一个企业多语言单点登录解决方案&#xff0c;支持大量附加身份验证协议和功能&#xff0c;满足身份验证和授权需求的综合平台。 2.环境 Windows 10JDK 1.8git version 2.41.0.windows.3Tomcat 9.0.78Maven 3.5.3cas-overlay-…

【ARM 嵌入式 编译系列 4.2 -- GCC 链接规范 extern “C“ 介绍】

文章目录 extern "C" 介绍extern "C" 使用示例1.2.2 作用场景 上篇文章&#xff1a;ARM 嵌入式 编译系列 4.1 – GCC 编译属性 likely与unlikely 学习 下篇文章&#xff1a;ARM 嵌入式 编译系列 5 – GCC 内建函数 __builtin 介绍 extern “C” 介绍 exte…

轻辙视觉引擎以多种AI算法工具,助力纺织行业断线检测智能识别

近年来&#xff0c;人工智能技术在各行各业的应用愈发广泛&#xff0c;机器视觉作为人工智能的重要分支&#xff0c;成为当下的研究热点。机器视觉技术的发展&#xff0c;大幅提升了工业、农业、医疗等领域的效率和精度。尤其在工业领域&#xff0c;随着智能制造的进一步发展&a…

stringstream常见用法

目录 构造函数 输出字符串 修改和清空字符串 利用 stringstream 去除字符串空格 利用stringstream去除指定的字符 stringstream 数据库 <sstream> 构造函数 创建一个对象&#xff0c;向对象输入字符串&#xff1a; string x"abcdefg";stringstream s…

Zookeeper与Kafka

Zookeeper与Kafka 一、Zookeeper 概述1.Zookeeper 定义2.Zookeeper 工作机制3.Zookeeper 特点4.Zookeeper 数据结构5.Zookeeper 应用场景6.Zookeeper 选举机制 二、部署 Zookeeper 集群1.准备 3 台服务器做 Zookeeper 集群2.安装 Zookeeper3.拷贝配置好的 Zookeeper 配置文件到…

【Java】 java | git | win系统重装会给开发环境带来哪些问题

一、概述 1、近期发现电脑用起来不丝滑了&#xff0c;文件夹操作卡顿&#xff0c;一阵操作还会蓝屏 2、不能忍&#xff0c;整理排查 二、电脑情况 1、CPU&#xff1a; I5-9400F 2.9GHz 6核 2、内存&#xff1a; 32G 3、固态&#xff1a;256G 4、机械&#xff1a;1T 5、盘符使用…

二叉树的讲解

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大家三连关注&…