【Vue】Scoped、组件间通信、Props检验

目录

Scoped

作用

*原理 

组件通信 

前置知识

什么是组件通信

为什么需要组件通信

如何进行组件通信

如何辨别两个组件的关系

父子组件通信

父传子

子传父

非父子组件通信

祖先传后代

语法

任意两个组件通信 

步骤

Props校验

props是什么

作用

语法

组件的ref/reactive数据与props的区别


Scoped

作用

  • 默认情况下,写在任何一个.vue文件中style的样式是全局样式,这样的话,不仅会影响当前组件,也会影响其他组件。
  • 全局样式:会影响每个vue文件,存在样式污染/冲突的问题,style不添加scoped,默认都是全局样式。
  • 局部样式:只针对当前组件中的标签生效,不会影响其他组件的标签,如果想让样式变为局部样式,那么需要给style添加scoped属性。

综上,scoped的作用就是防止不同组件(vue文件)样式污染//冲突。

*原理 

当给组件的style添加了scoped属性之后,组件会发生如下变化:

  1. scoped会给当前组件内的所有标签添加一个自定义属性,名为data-v-xxxxxxxx。
  2. scoped会用这个属性选择器[data-v-xxxxxxxx],配合我们编写的选择器形成一个交集选择器。
  3. 每个组件只要添加scoped属性,都会生成唯一的data-v-xxxxxxxx自定义属性。换句话说,每个组件生成的这个属性名都不同,因此形成的交集选择器只能选中当前组内的标签,保证了不会发生样式污染。

如下:表示既是h3又具备data-v-7b1a1c5e属性的

h3[data-v-7b1a1c5e]{

        color:blue;

    }

组件通信 

前置知识

什么是组件通信

        一个组件把数据传递给另一个组件。

为什么需要组件通信

        开发Vue3的项目是借助了组件化的开发思想,不会把代码写在同一个文件中,而是会拆分一系列组件,进而通过组件的组装,拼装成完整的页面,这里难免需要进行组件间的数据传递,那么就需要组件通信了。

总的来说,可以归结于两点:

  1. 每个组件是一个独立的模块,组件的数据别的模块无法使用。
  2. 别的组件需要用到当前组件的数据,那么就需要组件通信了。

如何进行组件通信

需要辨别两个组件的关系,进而选择不同的通信方案

1、父子组件(掌握):

  • 父传子:props自定义属性
  • 子传父:emit自定义事件

2、非父子组件(了解):

  • 祖先与后代:provide() + inject()
  • 兄弟组件:eventBus(事件总线)
  • 跨组件通信方案:Pinia(状态管理)

如何辨别两个组件的关系

  1. 父子关系:谁被使用,谁就是子组件,当前组件就是父组件

父子组件通信

父组件通过props将数据传递给子组件,子组件通过emit将数据传递给父组件。

父传子

当子组件的数据不固定的时候,也就是子组件的数据不能写死,就需要父传子。

父传子的语法:

  1. 子组件通过defineProps( )接收自己需要的数据,进而使用数据。(子接)
  2. 父组件内,子组件的自定义标签上,通过自定义属性传递数据。(父传)

子组件

这里数组的名字自定义,不是固定的。

<script setup>defineProps(['imgUrl','title','price'])
</script>

父组件

<script setup>import MyGoods from './components/MyGoods.vue'//父组件提供的数据const goodsObj={id:'123456',name:'kkk',price:150,picture:'https://test.com'}
</script>
<template><MyGoods :imgUrl="goodsObj.picture"/>
</template>

总结 

  1. 子接:defineProps(['数据名称1','数据名称2'])
  2. 父传:自定义属性名="值"

子传父

当子组件需要修改父组件的数据(props接收的数据是只读的,不能修改),就需要使用子传父。

而子传父的的语法是:

  1. 父组件提供修改数据的方法/函数,并在子组件的自定义标签上,绑定自定义事件。
  2. 子组件在恰当的时机,触发/调用父组件修改数据的方法/函数。

子组件

<template><button @click="onCut">砍价</button>
</template><script setup>import { ref } from 'vue'const props=defineProps(['imgUrl','title','price','idx'])//拿到触发自定义事件的函数 emitconst emit=defineEmits()//定义子组件砍价按钮,emit传入父组件给出的修改函数,和需要的参数const onCut=()=>{emit('ccc',props.idx,1)}
</script>

父组件

<template><MyGoods @ccc="subPrice"/>
</template><script setup>import MyGoods from './components/MyGoods.vue'const subPrice = (i,price) => {goodsList.value[i].price -= price}
</script>

总结

  1. 父监听/绑定:@自定义事件="父修改数据的函数"
  2. 子触发/通知:emit('自定义事件',传递的参数.....)

非父子组件通信

祖先传后代

作用:实现跨层级数据传递

语法

祖先组件提供数据

provide('数据名称',数据)

示例:

<script setup>import {ref,provide} from 'vue'const money=ref(1000)provide('money',money)
</script>

后代组件获取数据

const 数据=inject('数据名称') 

示例:

<script setup>import {ref,inject} from 'vue'const money=inject('money')
</script>

任意两个组件通信 

EventBus可以实现任意两个组件通信,但是使用较为麻烦,能不使用,便不使用。

步骤

前提:需要一个中间者(媒婆)

  1. 创建一个中间者模块
  2. 确定消息的发送方,中间者.emit('事件名称',数据)
  3. 确定消息的接收方:中间者.on('事件名称',(数据)=>{    })

中间者采用第三方模块mitt,步骤如下:

1、安装mitt

npm install --save mitt

2、与App.vue同级,创建一个eventBus.js文件,在这创建一个中间人并导出

import mitt from'mitt'//创建中间人
const meipo=mitt()//默认导出:目的是给其他组件可以拿到meipo这个中间人
export default meipo

3、发送方

<template>
<div><button @click="onSend">Send</button>
</div>
</template><script setup>import {ref} from 'vue'import meipo from "../eventBus.js"const msg=ref('12345678')const onSend=()=>{meipo.emit("sendMsg",msg.value)}
</script>

4、接收方 

<script setup>import {ref} from 'vue'import meipo from "../eventBus.js"meipo.on('sendMsg',(msg)=>{console.log(msg.value)})
</script>

Props校验

props是什么

如上面父子组件通信时使用到的,绑定在组件标签上的自定义属性,就是props

<MyGoods :imgUrl="goodsObj.picture"/>

作用

        当我们在进行props传属性值时,可能会出现类型不匹配之类的情况,因此我们需要为prop指定验证要求,不符合要求,控制台就会有错误提示,以此来提高代码的健壮性。

        换句话说,子组件接收的是什么样的props,那么父组件在传递的时候也必须按照这个规则来传递,双方都得遵守的一种协议。

语法

1、数组接收法:

defineProps(['imgUrl','title'])

  • 优点:简单、上手快。
  • 缺点:无法对接收的props进行校验,健壮性差。

2、对象接收法(简易写法校验,只校验类型):

defineProps({

        title:String

        imgUrl:String

})

  • 优点:可以对props做校验,健壮性相对好点。
  • 缺点:写法相对复杂些。

3、完整写法校验

简易写法的校验只能验证数据类型,在某些情况下可能需要要求数据必须传等条件,此时简易写法便不能满足要求。

语法

defineProps({

       属性名:{

                type:Number,                //数据类型约束

                default:50,     //默认值,与required:true冲突,如果同时出现,required优先级更高

                required:true/false        //是否必须传值,默认不是必须传值

        }

})

 但是如果需要校验数据的范围,此时上述的方法便无法满足要求,就需要使用自定义校验函数

defineProps({

       属性名:{

                type:Number,                //数据类型约束

                default:50,     //默认值,与required:true冲突,如果同时出现,required优先级更高

                required:true/false        //是否必须传值,默认不是必须传值

                validator(value){

                        //value是实际props传递的值

                        if(value<0)

                        {

                                console.error("!")

                                return fasle

                       }

                        return true

                } 

        }

})

组件的ref/reactive数据与props的区别

相同点

都可以为组件提供数据,进而使用

不同点

  1. ref/reative数据:是组件自己的数据,组件既可以获取,也可以修改
  2. props数据: 本质是由父组件提供的数据,子组件拿到这个数据之后,只能获取,不能直接修改,遵循单向数据流原则,想要修改,需要用到子传父的方法。

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

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

相关文章

vue 一行显示的动态消息

动态消息上翻显示 效果图 特点&#xff1a; 重复的信息&#xff0c;只显示一次全部信息显示完后&#xff0c;只在轮播最后一个消息队列若最后一个消息队列只有一条信息&#xff0c;则停止轮播&#xff0c;不轮播新的消息队列进入后&#xff0c;触发新的轮播 <template&g…

html+css+JavaScript实现轮播图

html+css+JavaScript实现轮播图 实现思路 要实现一个轮播图功能,我们需要HTML来构建结构,CSS来设计样式,以及JavaScript来添加交互功能。下面我将分别分析这三个部分是如何协同工作来实现轮播图的。 HTML - 结构 HTML部分定义了轮播图的基本结构,包括图片列表、指示器和…

使用Unity脚本模拟绳索、布料(碰撞)

效果演示&#xff1a; 脚本如下&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;namespace PhysicsLab {public class RopeSolver : MonoBehaviour {public Transform ParticlePrefab;public int Count 3;public int Space 1;…

项目开发之Docker

文章目录 基础核心概念常用命令 实操1 windows11 docker mysql2 docker部署 xxljob3 container间调用异常问题4 部署mysql数据库5 docker desktop unexpected wsl error 基础 核心概念 其中的三个核心概念&#xff1a;dockerfile image/镜像 container/容器 image&#xff1a…

在Java中使用Apache POI导入导出Excel(六)

本文将继续介绍POI的使用&#xff0c;上接在Java中使用Apache POI导入导出Excel&#xff08;五&#xff09; 使用Apache POI组件操作Excel&#xff08;六&#xff09; 43、隐藏和取消隐藏行 使用 Excel&#xff0c;可以通过选择该行&#xff08;或行&#xff09;来隐藏工作表…

Ruby On Rails 笔记1——Rails 入门

突然想跟着官方文档把Ruby On Rails过一遍&#xff0c;把一些有用的记下来就可以一直看了&#xff0c;do它! https://guides.rubyonrails.org/v7.2/ 注&#xff1a;官网是英文文档&#xff0c;我自己翻译了一下&#xff0c;不确保完全准确&#xff0c;只供自己学习开发使用。 …

基于Matlab BP神经网络的电力负荷预测模型研究与实现

随着电力系统的复杂性和规模的不断增长&#xff0c;准确的电力负荷预测对于电网的稳定性和运行效率至关重要。传统的负荷预测方法依赖于历史数据和简单的统计模型&#xff0c;但这些方法在处理非线性和动态变化的负荷数据时&#xff0c;表现出较大的局限性。近年来&#xff0c;…

MperReduce学习笔记下

自定义InputFormat合并小文件 案例需求 无论hdfs还是mapreduce&#xff0c;对于小文件都有损效率&#xff0c;实践中&#xff0c;又难免面临处理大量小文件的场景&#xff0c;此时&#xff0c;就需要有相应解决方案。 案例分析 小文件的优化无非以下几种方式&#xff1a; …

中国汽车出海风口下,智能网联供应商如何掘金海外市场?

中国智能网联供应链出海掘金潮已至。 中国汽车工业协会最新发布的数据显示&#xff0c;2024年1-8月乘用车累计出口317.5万辆&#xff0c;同比增长29.4%。2023年中国汽车出口量近500万台&#xff0c;出口的销量对中国汽车总销量增长的贡献率达到55.7%。 根据各大车企披露的规划…

react + antd desgin 使用form功能时upload,radio,checkbox不能回显的问题

最近使用react开发 遇到form回显的问题 &#xff0c;处理upload回显的问题&#xff0c;提示 react-refresh:160 Warning: [antd: Upload] value is not a valid prop, do you mean fileList? 查看文档后&#xff0c;在form.item 组件下有一个特殊属性 valuePropName 子节点的值…

Visual Studio开发lua脚本环境搭建

在Visual Studio上开发lua脚本环境搭建 1、下载lua的jdk安装&#xff0c;以及环境变量配置 下载LuaForWindows_v5.1.5-52.exe安装&#xff0c; 安装好之后&#xff0c;检查是否路径自动。 下载地址&#xff1a; https://github.com/rjpcomputing/luaforwindows/releases (1…

Elasticsearch ILM 故障排除:常见问题及修复

作者&#xff1a;来自 Elastic Stef Nestor 大家好&#xff01;我们的 Elasticsearch 团队正在不断改进我们的索引生命周期管理 (index Lifecycle Management - ILM) 功能。当我第一次加入 Elastic Support 时&#xff0c;我通过我们的使用 ILM 实现自动滚动教程快速上手。在帮…

初步简单的理解什么是库,什么是静态库,什么是动态库

库是什么 库根据名字我们应该很容易理解&#xff0c;在我们日常生活种&#xff0c;包含库的东西有很多&#xff0c;像仓库&#xff0c;库房那些&#xff0c;库是拿来存放&#xff0c;方便管理东西的&#xff0c;在我们编程当中&#xff0c;库的定义也是如此 那么为什么要有库…

建筑行业数据分析如何做?

导读&#xff1a;在谈数字化转型之前&#xff0c;先来谈谈数据的价值。数字化转型的基础是数据&#xff0c;是数字化的基本的生产资料&#xff0c;数据的质量直接决定了数字化的能力、所能达到的深度和广度。目前做的数据可视化项目总感觉只是数据展现而已&#xff0c;而不达不…

服务器监控工具哪吒探针 v1 版本上线 全新设计带来新体验

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 上周黑五期间&#xff0c;哪吒探针进行了一次颇有争议的 Breaking Change 更新&#xff0c;将面板和 Agent 升级到了 v1 版本&#xff0c;并且与原来的 v0.x 版本完全不兼容。 同时&#xff0c;将 v0.x 的…

QNX的资源管理器:resmgr

参考资料: QNX官网文档 openqnx源码参考 这篇文章借用一下openqnx中的trunk/services/dumper/dumper.c作为参考 以下代码参考openqnx,现在的QNX许多机制或许有大致改进和调整,但是基本上不会跳出这个框架 在Linux中,一切设备皆文件,在/dev目录下,一个文件标识一个或多…

Node.js 中的文件系统(fs)模块详解与代码示例

Node.js 中的文件系统&#xff08;fs&#xff09;模块详解与代码示例 Node.js 的 fs 模块提供了与文件系统交互的能力&#xff0c;包括文件的读写、目录的管理等。以下是 fs 模块中一些常用方法的详细解释和代码示例&#xff1a; 1. 异步读取文件内容 作用&#xff1a;异步读…

LabVIEW密码保护与反编译的安全性分析

在LabVIEW中&#xff0c;密码保护是一种常见的源代码保护手段&#xff0c;但其安全性并不高&#xff0c;尤其是在面对专业反编译工具时。理论上&#xff0c;所有软件的反编译都是可能的&#xff0c;尽管反编译不一定恢复完全的源代码&#xff0c;但足以提取程序的核心功能和算法…

灰狼算法与蚁群算法的结合:一种新颖的优化方法

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

【前端学习路线】(超详细版本)

先附上学习路线图&#xff1a;前端学习路线 第一阶段&#xff1a;前端入门&#xff08;htmlcss&#xff09; 前端最基本的知识&#xff0c;需要先将这些内容融汇贯通&#xff0c;学习后面内容才会不吃力。学习完可以做几个静态页练习一下。 推荐视频学习链接&#xff1a; 黑马程…