vue系列==vue组件

vue系列==vue组件

1、组件样式控制

1.1全局样式控制

1.2局部样式控制

1.3深度样式控制

2、组件通信

2.1组件父与子之间的通信props

2.1.1简单数组接收模式

2.1.2简单对象和复杂对象接受模式

2.2 组件通信之ref与defineExpose

ref 的作用

defineExpose 的作用

运用 ref 和 defineExpose 的场景

ref

defineExpose

2.3组件通信之emits与defineEmits

3、内置组件

3.1内置组件Component

3.2内置组件之Teleport


1、组件样式控制

1、Vue组件文件中可以缺少script、template、style中的任意一个部分,程序不会报任何错误。

2、

1.1全局样式控制

1、在组件中定义的样式,默认是全局有效的。也就是说,其可以作用于当前组件中的标签、子组件的根标签及外部的标签。

2、组件样式是全局有效的,无论是在哪个组件上设置,作用都是全局的

3、

1.2局部样式控制

1、只需在style标签中添加scoped属性即可,这也就是我们常说的局部作用域样式。

1.3深度样式控制

1、如何能让组件的局部样式(也就是局部作用域样式)影响子组件的子标签呢?这就需要使用Vue提供的深度作用域选择器来实现。代码其实很简单,只需要将需要进行深度选择的标签用“​:deep(​)​”来包含,它就能匹配并影响子组件的子标签。

2、组件通信

2.1组件父与子之间的通信props

1、父与子可以通过props属性传递的方式实现交互,其中分为简单数组接收、简单对象接收和复杂对象接收3种模式

2、

2.1.1简单数组接收模式

1、从父组件的设置与传递属性到子组件的接收与使用属性的整个过程可以划分成两个部分

2、利用defineProps即可实现属性的接收,因为有多个属性,所以可以利用数组接收属性

3、先将数据中转,然后获取。比如在子组件中声明一个ref响应式数据update,将其初始值设置为defineProps接收的count属性值,在increase函数中通过“update.value++”进行累加处理,并在模板中进行渲染,实现代码如下

4、 :msg="message", 冒号表示将变量绑定到组件的属性上,这样就可以在组件中使用。如果你只是想传递一个固定的值,无论是数字还是字符串,使用:propName="value"是完全可以的。 如果你想要传递一个响应式数据,确保你在父组件中定义了响应式数据,并且使用:propName="reactiveData"进行绑定。 一般传递静态常量不需要用冒号,如:msg="Hello Vue 3.0"。

5、如果想要传递静态值,固定的值,那么就不要加冒号,不然需要加冒号传递给子组件通信

<!--  其中这里传递的参数要注意,如果直接传递变量,则需要加上冒号,如:msg="message" ,否则他只是传递一个静态变量不会更新。-->
<!--  :msg="message", 冒号表示将变量绑定到组件的属性上,这样就可以在组件中使用。如果你只是想传递一个固定的值,无论是数字还是字符串,使用:propName="value"是完全可以的。
如果你想要传递一个响应式数据,确保你在父组件中定义了响应式数据,并且使用:propName="reactiveData"进行绑定。
一般传递静态常量不需要用冒号,如:msg="Hello Vue 3.0"。--><TestCountSon :count="99" :msg="message" /><TestCountSon count="99" msg="Hello Vue 3.0sdfasfasdf" />
<script setup>// 接受父组件传递的propsimport {ref} from "vue";const props = defineProps(['count', 'msg'])// 声名响应数据const count = ref(props.count)const msg = ref(props.msg)// 监听父组件传递的props变化const increase = () => {count.value += 1msg.value = "增加数据"}</script><template><div>{{msg}}</div><div>{{count}}</div><button @click="increase">增加数据</button></template>

2.1.2简单对象和复杂对象接受模式

1、利用defineProps复杂对象接收模式进行优化。将count属性设置为对象类型,其属性值主要包括type(数据类型)​、default(默认值)​、required(是否必须传递)​、validator(自定义校验规则)4个部分。

2、在Vue中,如果属性校验失败,它通常只会在开发模式下在控制台输出一个警告。这是为了帮助开发者发现潜在的问题,并不会阻止组件的渲染或执行。

3、

  1. 仅用于开发阶段:在开发环境中,如果属性值没有通过校验,Vue会在控制台输出警告。在生产环境中,为了性能考虑,这些校验通常会被移除。

  2. 不会阻止渲染:即使校验失败,组件仍然会渲染,并且使用那个无效的属性值。Vue的设计哲学是尽可能保持灵活性和非侵入性,因此不会因为属性校验失败而阻止组件的渲染。

  3. 这些复杂的对象模型只是适用于开发阶段,即使错误了还是会一样执行的

      // const props = defineProps(['count', 'msg'])// 简单对象接受模式// const props = defineProps({count: Number, msg: String})// 复杂对象接受模式const props = defineProps({count: {type: Number,required: true,default: 6,validator: (value) => {if (value < 10)return valueelsereturn 9}},msg: { type: String, default: '默认值' }})

2.2 组件通信之ref与defineExpose

ref 的作用

  1. 直接访问DOM元素:通过 ref 可以直接访问组件模板中的DOM元素,从而进行操作,比如获取元素尺寸、聚焦等。

  2. 访问组件实例:在父组件中,可以通过 ref 引用子组件实例,进而访问子组件的公开属性和方法。

defineExpose 的作用

  1. 暴露组件内部状态:子组件可以使用 defineExpose 显式地暴露其内部状态(如响应式数据、方法等),使得父组件能够通过 ref 访问这些状态。

运用 ref 和 defineExpose 的场景

  1. 父组件控制子组件:当父组件需要直接控制或查询子组件的状态时,比如动态修改子组件的数据,或者调用子组件的方法。

  2. 表单验证:在表单组件中,父组件可能需要检查子组件(如输入框)的验证状态。

  3. 焦点管理:在复杂的表单或交互式应用中,可能需要从父组件控制子组件的焦点。

  4. 组件通信:当使用事件发射(emit)不太合适或者过于复杂时,比如需要传递多个状态或方法,使用 ref 和 defineExpose 可以简化通信。

在Vue 3中,ref 和 defineExpose 是组件通信的两种方式,它们通常一起使用来允许父组件访问子组件的属性或方法。

ref

ref 是Vue 3中的一个功能,用于创建一个响应式的引用,可以用来引用DOM元素或组件实例。当你在父组件中使用 ref 来引用一个子组件时,你可以通过这个引用直接访问子组件的实例。

defineExpose

defineExpose 是一个Vue 3的API,它允许你在子组件中显式地暴露属性和方法,这样父组件就可以通过 ref 访问它们。默认情况下,子组件的所有属性和方法都是私有的,不会暴露给父组件。

<script setup>// 接受父组件传递的propsimport {ref} from "vue";const msg = ref("asdfasdfasf");// 修改msg的值// 定义了一个changeMsg方法,修改msg的值const changeMsg = () => {msg.value = "Hello Worasdfasdfasfld";}//暴露给父组件的接口defineExpose({msg,changeMsg})</script>
  // 父组件调用子组件的方法const dddd = ref(null)function changedddd() {dddd.value.changeMsg()}</script><template><div > {{count}}</div><button @click="changeCount">Change Count</button><TestCountSon  ref="dddd" /><div>这是父内容</div><button @click="changedddd">Change Count</button></template>

2.3组件通信之emits与defineEmits

1、

3、内置组件

1、内置组件之Component

2、

3.1内置组件Component

1、Component组件可以用来当作tab选项卡内容的方面,

3.2内置组件之Teleport

1、根据4.1节所学内容可以得知,Vue项目中的所有组件都被包含在App这一根组件下,而在入口文件main.js中引入根组件App后会将其挂载于“#app”网页元素上,这就意味着Vue项目中的所有组件元素都被包含在“#app”网页元素中。假如现在有一个需求:在网页的顶层显示一个模态框。如果可以实现模态框元素直接包含在body标签中,让该元素和“#app”网页元素同级并列,那么控制结果会变得简单,此时就可以使用具有移动功能的内置组件Teleport来实现

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

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

相关文章

智慧水肥一体化:道品科技现代农业的智能管理模式

智慧水肥一体化是现代农业中一种重要的管理模式&#xff0c;它通过信息技术和物联网技术的结合&#xff0c;实现对水资源和肥料的智能化管理。这一系统的主要功能包括环境监测、集中管理、智能控制、主动报警和数据管理。以下将分别对这些功能进行详细阐述&#xff0c;并探讨智…

ES入门:查询和聚合

安装完ElasticSearch 和 Kibana后我们开始学习 为了方便测试&#xff0c;使用kibana的dev tool来进行学习测试&#xff1a; 测试工具 从索引文档开始 插入 向 Elasticsearch 索引 customer 的 _doc 类型的文档 id 为 1 的文档发送 PUT 请求的例子。 请求体为 JSON 格式&am…

ffmpeg编译报错mathops.h--ffmpeg Error: operand type mismatch for `shr‘

我在OpenEuler上编译ffmpeg出现了这个问题。 我试了三个版本4,4.4,7.0其中7.0没有出现这个问题&#xff0c;但是我需要编译libvlc不能用那么高的版本&#xff0c;4和4.4都有那个问题 解决办法: 将mathops.h中的内容替换为如下内容: /* * simple math operations * Copyright …

Docker Remote API TLS 认证_docker远程接口未授权访问漏洞怎么解决

漏洞描述&#xff1a; Docker Remote API 是一个取代远程命令行界面的REST API&#xff0c;其默认绑定2375端口&#xff0c;如管理员对其配置不当可导致未授权访问漏洞。攻击者利用docker client或者http直接请求就可以访问这个API&#xff0c;可导致敏感信息泄露&#xff0c;…

华为eNSP:QinQ

一、什么是QinQ&#xff1f; QinQ是一种网络技术&#xff0c;全称为"Quantum Insertion"&#xff0c;也被称为"Q-in-Q"、"Double Tagging"或"VLAN stacking"。它是一种在现有的VLAN&#xff08;Virtual Local Area Network&#xff0…

利用SCF文件构建网络渗透

SMB是一种广泛用于企业组织中文件共享目的的网络协议。在内部的渗透测试中&#xff0c;发现包含明文密码和数据库连接字符串等敏感信息的共享文件并不罕见。但是&#xff0c;即使一个文件共享不包含任何可用于连接到其他系统的数据&#xff0c;但是未经身份验证的用户配置拥有该…

陀螺仪BMI323驱动开发测试(基于HAL库SPI通信)

参考资料 编写代码 读取芯片ID void BMI160_Init(void) {uint16_t chipID BMI323_read(BMI160_REG_CHIP_ID);debug("BMI323芯片ID为0x%x;", chipID);if (chipID ! 0x43){debug("未检测到BMI323;");}elsedebug("检测到陀螺仪BMI323;");u8 buf_…

基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,宠物类别,领养中心,领养申请,云投喂,申请入驻,义工入驻 开题报告内容 基于Vue框架的流浪宠物救助系统开题报告 一、项目背景 近年来&#xff0c;随着城市化进程的加速&#xff0c;流浪动物问题日益凸显。它们面临着食物短缺、疾…

Python | Leetcode Python题解之第541题反转字符串II

题目&#xff1a; 题解&#xff1a; class Solution:def reverseStr(self, s: str, k: int) -> str:t list(s)for i in range(0, len(t), 2 * k):t[i: i k] reversed(t[i: i k])return "".join(t)

机器学习2_支持向量机_线性可分——MOOC

目录 定义 线性可分&#xff08;Linear Separable&#xff09; 线性不可分&#xff08;Nonlinear Separable&#xff09; 数学化定义 问题描述 优化问题 线性可分定义 假定训练样本集是线性可分的 1、最小化&#xff08;Minimize&#xff09;&#xff1a; 2、限制条件…

Linux-socket详解

Linux-socket详解_socket linux-CSDN博客

Java基础-Java中的常用类(上)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 String类 创建字符串 字符串长度 连接字符串 创建格式化字符串 String 方法 System类 常用方法 方…

LeetCode78. 子集(2024秋季每日一题 58)

给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的 子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2],[1,2],[3…

基于TRIZ理论的便携式光伏手机充电装置创新

随着智能手机功能的日益强大&#xff0c;电量消耗问题也日益凸显&#xff0c;尤其是在户外活动时&#xff0c;电量告急常常让人措手不及。面对这一挑战&#xff0c;基于TRIZ&#xff08;发明问题解决理论&#xff09;的创新思维&#xff0c;一款全新的便携式光伏手机充电装置应…

Django目录结构最佳实践

Django项目目录结构 项目目录结构配置文件引用修改创建自定义子应用方法修改自定义注册目录从apps目录开始 项目目录结构 └── backend # 后端项目目录&#xff08;项目名称&#xff09;├── __init__.py├── logs # 项目日志目录├── manage.py #…

《今日制造与升级》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问&#xff1a;《今日制造与升级》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《今日制造与升级》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;中国机械工业联合会 …

WPF中如何简单的使用CommunityToolkit.Mvvm创建一个项目并进行 增删改查

目录 开始前准备的数据库dbblog如下&#xff1a; 第一步&#xff1a;创建项目后下载四个NuGet程序包 第二步&#xff1a;删除原本的MainWindow.XAML文件 并创建如下的目录结构 然后在View文件夹下面创建Login.XAML和Main.XAML 并且在App.XAML中将启动项改为Login.X…

人工智能技术:未来生活的“魔法师”

想象一下&#xff0c;未来的某一天&#xff0c;你醒来时&#xff0c;智能助手已经为你准备好了早餐&#xff0c;你的智能家居系统根据你的心情和日程安排调整了室内的光线和音乐&#xff0c;而你的自动驾驶汽车已经在门口等你。这不是科幻小说&#xff0c;这是人工智能技术为我…

Vue 全局状态管理:Vuex 从入门到精通

前言 在开发 Vue 应用时&#xff0c;管理组件之间的状态共享变得越来越重要。特别是当应用变得复杂&#xff0c;组件之间的通信越来越多时&#xff0c;如何有效地管理状态成为了一个重要问题。Vuex 是 Vue 提供的一种集中式状态管理模式&#xff0c;能够帮助开发者更好地管理应…

计算机视觉算法:从图像处理到智能识别

计算机视觉算法&#xff1a;从图像处理到智能识别 计算机视觉&#xff08;Computer Vision&#xff09;是人工智能领域的一个重要分支&#xff0c;旨在使计算机能够“看”和理解图像或视频中的内容。随着深度学习和大数据技术的快速发展&#xff0c;计算机视觉算法在图像识别、…