组件冲突、data函数、组件通信

文章目录

    • 1.组件的三大组成部分 - 注意点说明
    • 2.组件的样式冲突（用 scoped 解决）
    • 3.data是一个函数
    • 4.组件通信
      • 1.什么是组件通信？
      • 2.不同的组件关系 和 组件通信方案分类
    • 5.prop详解
      • prop 校验
        • ①类型校验
        • ②完整写法（类型，非空，默认，自定义）
      • prop & data 单项数据流
    • 6.非父子通信（拓展）- event bus 事件总线
    • 非父子通信-provide-inject（拓展）

1.组件的三大组成部分 - 注意点说明

组件的三大组成部分 - 注意点说明👇

①结构 < template >：只能有一个根元素
②样式 < style >：
全局样式(默认):影响所有组件
局部样式：scoped样式下，只作用于当前组件
③逻辑 < script >：el根实例独有，data是一个函数，其他配置项一致
（下面将详细的逐一地学一下②③部分）

2.组件的样式冲突（用 scoped 解决）

默认情况：写在组件中的样式会 全局生效→ 因此很容易造成多个组件之间的样式冲突问题。

scoped原理：

  • 1.给当前组件模板的所有元素，都会被添加上一个自定义属性data-v-hash值（且同一个组件中的hash值是一样的，所以它就可以用不同的hash值区分不同的组件）
    在这里插入图片描述
  • 2.css选择器的后面，被自动处理，添加上了属性选择器
    在这里插入图片描述
  • 最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到

在这里插入图片描述

//BaseOne.vue
<template><div>BaseOne</div>
</template><script>
export default{
}
</script>
<style>
/* 默认的style样式，会作用于全局 */div {border:  3px solid blue;margin: 30px;}
</style>//BaseTwo.vue
<template><div>BaseTwo</div>
</template>
<script>
export default{
}
</script>
<style>
</style>//App.vue
<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne.vue';
import BaseTwo from './components/BaseTwo.vue'
export default{name:'App',components:{BaseOne:BaseOne,BaseTwo:BaseTwo}}
</script><style></style>
效果图如下

在这里插入图片描述

👇加上scoped进行修改

<style scoped>
/* 1.默认的style样式，会作用于全局2.加上scoped属性的style样式，只会作用于当前组件👉局部样式
组件应该有着自己独立的样式，推荐加上scoped*/div {border:  3px solid blue;margin: 30px;}
</style>
效果图如下

在这里插入图片描述

3.data是一个函数

①一个组件如果要提供数据，也是通过data
②一个组件的data选项必须是一个函数。👉 保证每一个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次data函数，得到一个新的对象

<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default{// data必须是一个函数 → 保证每个组件实例data (){return{count: 999}}
}
</script>
<style scoped>
.base-count{margin: 20px;
}
</style>

图文总结👇
在这里插入图片描述

4.组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

  • 组件的数据是独立的，无法直接访问其他组件的数据。
  • 想用其他组件的数据 → 组件通信

思考：1.组件之间有哪些关系？ 2.对应的组件通信方案有哪几类?

2.不同的组件关系 和 组件通信方案分类

  • 组件关系分类:
    1.父子关系:组件A包裹组件B.那AB就是父子关系
    2.非父子关系:A包裹B和C,所以BC是非父子关系
    在这里插入图片描述
<!-- App.vue -->
<template><div style="border:3px solid #000;margin: 10px;">我是App组件<!-- 老爹的这个组件，儿子要用 --><!-- 1. 给组件标签，添加属性的方式传值--><Son :title="myTitle"></Son></div>
</template><script>import BaseSon from './components/BaseSon.vue'
export default{data () {return {myTitle:'黑马程序员'}},components:{BaseSon:BaseSon,}
}
</script>
<style>
</style><!-- BaseSon.vue -->
<template><div style="border:3px solid #000;margin: 10px;"><!-- 3.渲染使用 -->我是组件Son {{ title }}</div>
</template><script>
export default{// 2.通过props进行接受，且props里面的名字要和老爹里面要传过来的东西同名props:['title']//3.这边接收完毕，页面中就可以直接渲染使用了
}
</script>
<style>
</style>

在这里插入图片描述

<!-- App.vue -->
<template><div style="border:3px solid #000;margin: 10px;">我是App组件<!-- 老爹的这个组件，儿子要用 --><!-- 1. 给组件标签，添加属性的方式传值--><Son :title="myTitle" @changeTitle="handelChange"></Son></div>
</template><script>import BaseSon from './components/BaseSon.vue'
export default{data () {return {myTitle:'黑马程序员'}},components:{BaseSon:BaseSon,},methods:{//3.提供处理函数，提供逻辑handelChange (newTitle) {this.myTitle = newTitle}}
}
</script>
<style>
</style><!-- BaseSon.vue -->
<template><div style="border:3px solid #000;margin: 10px;">我是组件Son {{ title }}<button @click="changeFn">修改titile</button></div>
</template><script>
export default{props:['title'],methods:{changeFn () {//1.通过$emit，向父组件发送消息通知this.$emit('changeTitle','传智教育')}}
}
</script>
<style>
</style>

图文总结👇在这里插入图片描述

5.prop详解

什么是prop
Prop定义：组件上注册一些自定义属性
prop作用：向子组件传递数据

特点：

  • 可以传递任意数量的prop
  • 可以传递任意类型的prop

写法：1.在父组件中提供一些数据（字符串，对象，布尔值等）
2.然后通过给当前这个组件以添加属性的方式传值
3.传了之后,在子组件内部，就可以通过props接收
4.最终一面当中就可以做渲染了
👇
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

App.vue<template><div class="app"><!-- 父传子 --><UserInfo:username="username":age="age":isSingle="isSingle":car="car":hobby="hobby"></UserInfo></div>
</template><script>
import UserInfo from './components/UserInfo.vue'
export default {data() {return {username: '小帅',age: 28,isSingle: true,car: {brand: '宝马',},hobby: ['篮球', '足球', '羽毛球'],}},components: {UserInfo,},
}
</script><style>
</style>UserInfo.vue<template><div class="userinfo"><h3>我是个人信息组件</h3><div>姓名：{{ username }}</div><div>年龄：{{ age }}</div><div>是否单身：{{ isSingle ? 'yes' : 'no' }}</div><div>座驾：{{ car.brand }}</div><div>兴趣爱好:{{ hobby.join('、') }}</div>    <!-- 加上 .join('、') 就可以给三个爱好的文字之间加上顿号 --></div>
</template><script>
export default {props:['username','age','isSingle','car','hobby']
}
</script><style>
.userinfo {width: 300px;border: 3px solid #000;padding: 20px;
}
.userinfo > div {margin: 20px 10px;
}
</style>

prop 校验

思考：组件的prop可以乱传吗？（不可以，比如一个百分比数字不可以给它传布尔值）
作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者快速发现错误
语法：
①类型校验
②非空校验
③默认值
④自定义校验

①类型校验

需要将原来props接收数据的写法改成对象，对象里面就可以写键值对了。值就是对应的类型要求：比如传进来的是Number类型，就写number
在这里插入图片描述

App.vue
<template><div class="app"><BaseProgress :w="width"></BaseProgress></div>
</template><script>
import BaseProgress from './components/BaseProgress.vue'
export default {data() {return {width: 'abc',}},components: {BaseProgress,},
}
</script><style>
</style>BaseProgress.vue
<template><div class="base-progress"><div class="inner" :style="{ width: w + '%' }"><span>{{ w }}%</span></div></div>
</template><script>
export default {// props: ["w"],props:{w:Number//Number String Boolean Array Object Function}// 1.基础写法（类型校验）// 2.完整写法（类型、是否必填、默认值、自定义校验）
}
</script><style scoped>
省略
</style>

在这里插入图片描述

②完整写法（类型，非空，默认，自定义）

在这里插入图片描述

<script>
export default {// props: ["w"]//1.基础校验（类型校验）// props:{//   w:Number//Number String Boolean Array Object Function// }// 2.完整写法（类型、是否必填、默认值、自定义校验）props:{w:{//对类型有要求type:Number,required:true,//需要非空default:0,//如果希望有一个默认值。而不是必填validator (value){//写这样一个方法，这个方法的形参，是可以拿到//你传递过来的prop传值的，拿到传值，就可以对他进行判断if (value >=0 && value <=100) {return true}return false}}}
}
</script>

prop & data 单项数据流

共同点：都可以给组件提供数据
区别：

  • data的数据是自己的 → 随便改
  • prop的数据是外部的 → 不能直接改 ，要循环单向数据流
App.vue
<template><div class="app"><BaseCount></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue'
export default {components:{BaseCount},data(){return {count:100}},methods:{}
}
</script><style></style>erzi
<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {// 1.自己的数据随便修改 （谁的数据 谁负责）// 意思就是，打开网页，想加就加，想减就减// data () {//   return {//     count: 100,//   }// },// 2.外部传过来的数据（由父组件提供） 不能随便修改props:{count:Number}
}
</script><style>
.base-count {margin: 20px;
}
</style>

上面的代码，数据由父组件提供，一保存会直接报错（外部数据不能直接改）
需要提供对应的函数

app.vue
<template><div class="app">、<!-- 老爹监听 --><BaseCount@changeCount="handleChange"></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue'
export default {components:{BaseCount},data(){return {count:666}},methods:{handleChange (newCount) {this.count = newCount}}
}
</script><style></style>~.vue
<template><div class="base-count"><button @click="handleSub">-</button><span>{{ count }}</span><button @click="handleAdd">+</button></div>
</template><script>
export default {// 1.自己的数据随便修改 （谁的数据 谁负责）// 意思就是，打开网页，想加就加，想减就减// data () {//   return {//     count: 100,//   }// },// 2.外部传过来的数据（由父组件提供） 不能随便修改//单项数据流：父组件的prop更新，会单向的向下流动，影响到子组件props:{count:Number},methods:{handleAdd(){//通过子传父 this.$emit(事件名，参数)//告诉老爹改数字，然后在老爹里面需要监听一下this.$emit('changeCount',this.count + 1)},handleSub(){this.$emit('changeCount',this.count - 1)}}
}
</script><style>
.base-count {margin: 20px;
}
</style>

6.非父子通信（拓展）- event bus 事件总线

作用:非父子组件之间，进行简易消息传递。（复杂场景 → Vuex）
1.创建一个都能访问到的事件总线（空 Vue实例）→ utils/EventBus.js

impprt Vue for 'vue'
const Bus = new Vue()
export default Bus

2.A组件（接收方），监听Bus实例的事件监听事件（订阅消息）

created () {Bus.$on('sendMsg',(msg) =>{this.msg = msg})

3.B组件（发送方），触发Bus实例的事件

Bus.$emit('sendMsg','这是一个消息')

在这里插入图片描述

非父子通信-provide-inject（拓展）

provide & inject 作用：跨层级共享数据

1.父组件`provide``提供数据
（provide写成一个函数，在里面return，return就是共享的数据，里面可以写多个数据【简单（string）/复杂（对象）类型】）

export default {provide () {return {//普通类型【非响应式】colour:this.color,//复杂类型【响应式】userInfo:this.userInto,}}
}

子/孙组件（无论多少层） inject取值使用（直接写你要接收的属性名就可以了，将来也可以通过this直接访问）

export default {inject: ['color','userInfo'],created () {console,log(this.color,this.userInfo)}	
}

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

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

相关文章

REVIT二次开发设置门垛高度

REVIT二次开发设置门垛高度

步骤1 步骤2 步骤3 using System; using System.Collections.Generic; using System.Linq; using System
阅读更多...
Redis 持久化详解：RDB 与 AOF 的配置、触发机制和实际测试

Redis 持久化详解：RDB 与 AOF 的配置、触发机制和实际测试

什么是持久化&#xff1f; 就是 Redis 将内存数据持久化到硬盘&#xff0c;避免从数据库恢复数据。之所以避免从数据库恢复数据是因为后端数据通常有性能瓶颈&#xff0c;大量数据从数据库恢复可能会给数据库造成巨大压力。 Redis 持久化通常有 RDB 和 AOF 两种方式&#xff…
阅读更多...
计算机网络 第5章（运输层）

计算机网络 第5章（运输层）

系列文章目录 计算机网络 第1章&#xff08;概述&#xff09; 计算机网络 第2章&#xff08;物理层&#xff09; 计算机网络 第3章&#xff08;数据链路层&#xff09; 计算机网络 第4章&#xff08;网络层&#xff09; 计算机网络 第5章&#xff08;运输层&#xff09; 计算机…
阅读更多...
vue3之 websoket发送消息

vue3之 websoket发送消息

1.封装websoket var ws null; //建立的连接 var lockReconnect false;//是否真正建立连接 var timeout 6 * 1000 * 5;//30秒一次心跳 var timeoutObj null;//心跳心跳倒计时 var serverTimeoutObj null;//心跳倒计时 var timeoutnum null;//断开 重连倒计时 var global_…
阅读更多...
DA14531平台secondary_bootloade工程修改笔记

DA14531平台secondary_bootloade工程修改笔记

DA14531平台secondary_bootloade工程修改笔记 1.支持在线仿真 初始时加入syscntl_load_debugger_cfg(); 表示可以重复Jlink连接调试仿真 2.支持串口烧录&#xff0c;和支持单线线写 utilities\secondary_bootloader\includes\bootloader.h /************** 2-wire UART supp…
阅读更多...
Siamese network 孪生神经网络--一个简单神奇的结构

Siamese network 孪生神经网络--一个简单神奇的结构

1.名字的由来 Siamese和Chinese有点像。Siam是古时候泰国的称呼&#xff0c;中文译作暹罗。Siamese也就是“暹罗”人或“泰国”人。Siamese在英语中是“孪生”、“连体”的意思&#xff0c;这是为什么呢&#xff1f; 十九世纪泰国出生了一对连体婴儿&#xff0c;当时的医学技术…
阅读更多...
点赞！HashData连续三年获评数据猿“最具投资价值企业奖”

点赞！HashData连续三年获评数据猿“最具投资价值企业奖”

近日&#xff0c;由上海市经济和信息化委员会、上海市科学技术委员会指导&#xff0c;数据猿和上海大数据联盟共同主办的“第六届金猿季&魔方论坛——大数据产业发展论坛”在上海举行。本次活动以“小趋势大未来”为主题&#xff0c;展示了大数据与人工智能、云计算、5G等新…
阅读更多...
仰暮计划|“她已跨过了八旬的门槛，一个人见证了时光洪流的智慧年代”

仰暮计划|“她已跨过了八旬的门槛，一个人见证了时光洪流的智慧年代”

倾听与关爱 2023年7月4日中午&#xff0c;我跟随“羽翼”社会实践服务队、党员服务小组一起到柏桥村完成我们本次三下乡的调研任务&#xff0c;通过走访当地居民并与当地党群服务中心干部进行交谈了解当地乡村振兴落实情况。 在走往柏桥村的路上&#xff0c;我有幸遇到了教师…
阅读更多...
【操作系统】实验六 分析源代码

【操作系统】实验六 分析源代码

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…
阅读更多...
Vulnhub-FUNBOX: GAOKAO渗透

Vulnhub-FUNBOX: GAOKAO渗透

文章目录 前言1、靶机ip配置2、渗透目标3、渗透概括 开始实战一、信息获取二、爆破FTP服务三、GetShell四、提权 前言 由于在做靶机的时候&#xff0c;涉及到的渗透思路是非常的广泛&#xff0c;所以在写文章的时候都是挑重点来写&#xff0c;尽量的不饶弯路。具体有不不懂都的…
阅读更多...
仰暮计划|“他说，他是出生于两个时代的人”

仰暮计划|“他说，他是出生于两个时代的人”

凌保庆老爷爷&#xff0c;1942年10月4日出生&#xff0c;今年82岁&#xff0c;家住在河南省登封市唐庄乡磨沟村。7月28日&#xff0c;我作为仰暮计划小队的一员去拜访了这位老人&#xff0c;听凌爷爷讲述了他的故事。 走进这户人家的时候&#xff0c;凌爷爷正在书房里。虽然家…
阅读更多...
Spring第三天

Spring第三天

今日目标 能够理解AOP的作用 能够完成AOP的入门案例 能够理解AOP的工作流程 能够说出AOP的五种通知类型 能够完成"测量业务层接口万次执行效率"案例 能够掌握Spring事务配置 一、AOP 1 AOP简介 问题导入 问题1&#xff1a;AOP的作用是什么&#xff1f; 问题2&am…
阅读更多...
【MySQL实践】一个隐蔽的问题导致 Field ‘xxx‘ doesn‘t have a default value

【MySQL实践】一个隐蔽的问题导致 Field ‘xxx‘ doesn‘t have a default value

文章目录 1.背景2.问题处理3.思考与总结 1.背景 最后在公司的后台系统上遇到了一个线上问题&#xff0c;是在插入某个表数据的时候出现了数据库的插入异常&#xff0c;即&#xff1a;java.sql.SQLException: Field xxx doesnt have a default value&#xff0c;这其实是一个比…
阅读更多...
javaweb-js-vue基础知识(持续更新中)

javaweb-js-vue基础知识(持续更新中)

sshu 双向数据绑定 ---------------------------------------------------------- 注意淘宝镜像最新网址发生变化&#xff0c;记得改&#xff0c;不是老师现在用的那个&#xff0c;不然会下载出错&#xff01;&#xff01;&#xff01; 没有的&#xff1a;ctrlshiftp&#xff…
阅读更多...
apipost和curl收不到服务器响应的HTTP/1.1 404 Not Found

apipost和curl收不到服务器响应的HTTP/1.1 404 Not Found

windows的apipost发送请求后&#xff0c;服务器响应了HTTP/1.1 404 Not Found&#xff0c;但是apipost一直显示发送中。 linux上的curl也一样。 使用wireshark抓包发现收到了响应&#xff0c;但是wireshark识别不了&#xff08;图中是回应404后关闭了连接&#xff09;&#xff…
阅读更多...
Chatgpt的崛起之路

Chatgpt的崛起之路

Chatgpt的崛起之路 背景与发展历程背景发展历程 技术原理第一阶段&#xff1a;训练监督策略模型第二阶段&#xff1a;训练奖励模型第三阶段&#xff1a;采用强化学习来增强模型的能力。 国内使用情况及应用的领域面临的数据安全挑战与建议ChatGPT获取数据产生的问题数据泄露问题…
阅读更多...
接口自动化测试：mock server之Moco工具

接口自动化测试：mock server之Moco工具

什么是mock server mock&#xff1a;英文可以翻译为模仿的&#xff0c;mock server是我们用来解除依赖&#xff08;耦合&#xff09;&#xff0c;假装实现的技术&#xff0c;比如说&#xff0c;前端需要使用某些api进行调试&#xff0c;但是服务端并没有开发完成这些api&#…
阅读更多...
测试人年终总结：入行三年，下一步怎么走，思想碰撞

测试人年终总结：入行三年，下一步怎么走，思想碰撞

原贴地址&#xff1a;入行三年&#xff0c;下一步怎么走&#xff0c;思想碰撞 TesterHome 熟悉环境&#xff0c;进步缓慢&#xff1b;停止思考&#xff0c;举步不前&#xff08;为什么会有这篇文章why 初心变质&#xff1a;计算机系毕业&#xff0c;毕业时的打算是从测试进&a…
阅读更多...
程序员如何保持身心健康

程序员如何保持身心健康

程序员要保持身心健康&#xff0c;可以注意以下几个方面&#xff1a; 饮食健康&#xff1a;保持均衡的饮食&#xff0c;多吃蔬菜水果&#xff0c;减少油腻和高热量食物的摄入。同时&#xff0c;适当饮水&#xff0c;避免因长时间坐着工作而导致的脱水。尽量不要吃街边摊、大排…
阅读更多...
#常见问题总结#在docker中跑前端vue项目

#常见问题总结#在docker中跑前端vue项目

目录 前言一、no such file or directory, open...总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 记录在docker中跑前端项目过程中&#xff0c;我遇到的问题以及解决方法 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023