vue学习day07-scoped样式冲突、data是一个函数、props详解、组件通信、非父子通信-event bus 事件总线

19、scoped样式冲突

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

1)全局样式:默认组件中的样式会作用到全局

比如:

当只有box1设置边框时,却出现都有边框的情况

2)局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件

给box1加上scoped后

结果:

(2)scoped原理:

1)当前组件内标签都添加data-v-hash值的属性
2)css选择器都被添加[data-v-hash值]的属性选择器
3)最终效果:必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到
4)示例:

20、data是一个函数

一个组件中的data选项必须是一个函数。这可以保证每个组件实例,维护独立的一份数据对象。(每次创建新的组件实例,都会执行一次data函数,得到一个新对象)

比如:

当一个组件在根组件里多次使用时,该组件中的某一项数据值被使用多次,修改该值其中一个值,而不影响该值在其他地方的数值

21、组件通信

组件的数据是独立的,无法访问其他组件的数据,如果想用其他组件的数据,需要使用组件通信

(1)概念

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

(2)组件之间的关系

父子关系和非父子关系

(3)组件通信解决方案

1)父子关系(props和$emit)
①父传子

在父组件里:

在子组件中:

效果:

②子传父

子组件利用$emit通知父组件,进行修改更新

比如:

修改父传子的值

效果:

点击修改标题后

2)非父子(看23、24)

Provide和inject或eventbus

通用解决方案:Vuex(适合复杂业务场景)

22、props详解

(1)prop概念

组件上注册的一些自定义属性

(2)prop作用

向子组件传递数据

(3)特点:

1)可以传递任意数量的prop
2)可以传递任意类型的prop

(4)props校验

1)作用

为组件的prop指定验证要求,不符合要求,控制台会有错误提示;版主开发者快速发现错误

2)语法

简单写法

完整写法:

①类型校验
②非空校验
③默认值
④自定义校验

(5)prop与data、单项数据流

1)prop与data(谁的数据谁负责)
共同点:

①都可以给组件提供数据

区别:

①data的数据是自己的,可以随便改

②prop的数据是外部的,不能直接修改,要遵循单项数据流

2)单项数据流

父级prop的数据更新,会向下流动,影响子组件。这个流动是单向的。

23、非父子通信-event bus 事件总线

(1)作用:非父子组件之间,进行消息传递。(复杂场景,用vuex)

(2)步骤:

1)创建一个事件总线,导出Bus实例
2)发送方,触发Bus实例
①导入Bus实例
②通过$emit触发
3)接收方,监听Bus实例
①导入Bus实例
②通过$on接收消息

(3)示例:

24、非父子通信-provide-inject(拓展)

(1)作用:跨层级共享数据

(2)父组件提供数据,子/孙组件接收数据

(3)数据可以是普通类型(非响应式),也可以是复杂类型(响应式)

1)非响应式

如上图的num

2)响应式

如上图的userInfo

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试