vue2(4)之scoped解决样式冲突/组件通信/非父子通信/ref和$refs/异步更新/.sync/事件总线/provide和inject

最新推荐文章于 2025-08-08 17:48:39 发布
最新推荐文章于 2025-08-08 17:48:39 发布
阅读量1k 收藏 19
点赞数 7
CC 4.0 BY-SA版权
分类专栏： vue2和vue3学习 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_66318904/article/details/138214283

vue2

一、学习目标

1.组件的三大组成部分（结构/样式/逻辑）

​ scoped解决样式冲突/data是一个函数

2.组件通信

  1. 组件通信语法
  2. 父传子
  3. 子传父
  4. 非父子通信（扩展）

3.综合案例：小黑记事本（组件版）

  1. 拆分组件
  2. 列表渲染
  3. 数据添加
  4. 数据删除
  5. 列表统计
  6. 清空
  7. 持久化

4.进阶语法

  1. v-model原理
  2. v-model应用于组件
  3. sync修饰符
  4. ref和$refs
  5. $nextTick

二、scoped解决样式冲突

在这里插入图片描述

1.默认情况：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件

了解本专栏 订阅专栏 解锁全文 超级会员免费看
黑马Vue -D4 — 组件通信、props、event bus 事件总线、provide&inject、v-model原理、表单类组件封装、.sync修饰符、ref和$refs、异步更新 & $ne
u010481557的博客
10-16 424
style的默认样式是作用到哪里的？scoped的作用是什么？style中推不推荐加scoped？data写成函数的目的是什么？组件通信，就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问其他组件的数据。想使用其他组件的数据，就需要组件通信组件关系分类有哪两种父子组件通信的流程是什么？父向子子向父组件上 注册的一些 自定义属性1.非父子组件传值借助什么？2.什么是事件总线3.发送方应该调用事件总线的哪个方法4.接收方应该调用事件总线的哪个方法。
Vue2篇——第四章 Vue 样式隔离、数据规范与通信机制全解析（重点）
最新发布
2403_88453964的博客
08-18 1252
本文摘要： Vue组件开发核心技术总结：1)使用scoped实现样式隔离，避免全局污染；2)data必须为函数确保数据独立性；3)父子通信通过props/$emit，非父子通信采用eventbus或provide/inject；4)props支持类型校验与默认值；5)v-model本质是:value和@input的语法糖；6).sync修饰符简化双向绑定；7)ref/$refs获取DOM或组件实例；8)$nextTick解决异步更新后的DOM操作问题。这些技术点涵盖了组件样式管理、数据传递、状态校验和DOM
Vue 2 中的 Scope Slot（作用域插槽）详解
licy__的博客
12-09 1430
作用域插槽是 Vue 提供的一种特殊类型的插槽，它不仅能够自定义内容，还能让父组件访问子组件内部的数据或逻辑。换句话说，它提供了一种机制，使得父组件可以在渲染子组件时接收来自子组件的数据，并根据这些数据来定制化显示的内容。这极大地增强了组件间的交互性和可复用性。
Vue中使用scope注意事项
qiuhefeixue的博客
12-29 720
vue中为了避免父组件的同名选择器样式影响到子组件，会使用scope 解决这个问题，如：<style lang="stylus" rel="stylesheet/stylus" scoped> ，表示当前style属性只属于当前模块。
vue中css样式冲突的解决方法——scoped
qq_64037242的博客
11-29 1263
才会有这个自定义属性, 才会被这个样式作用到。→ 因此很容易造成多个组件之间的样式冲突问题。: 默认组件中的样式会作用到全局。组件的样式冲突 scoped。[data-v-hash值]可以让样式只作用于当前组件。2. css选择器都被添加。data-v-hash值。当前组件内标签都被添加。：写在组件中的样式会。必须是当前组件的元素。
Vue2中样式详解（scoped）
qq_53114797的博客
01-30 721
1.Vue中style标签的scoped属性表示它的样式只作用于当前模块，是样式私有化. 2.渲染的规则/原理：给HTML的DOM节点添加一个 不重复的data属性 来表示 唯一性在对应的 CSS选择器 末尾添加一个当前组件的 data属性选择器来私有化样式，如：.demo[data-v-2311c06a]{}如果引入 less 或 sass 只会在最后一个元素上设置
Vue2进阶篇-scoped样式、组件自定义事件
大脑不能为空
07-05 683
该文章介绍了scoped样式、以及组件自定义事件的使用方式。
vue2进阶-组件开发、组件通信、异步更新、自定义指令
qq_52320796的博客
04-09 1034
Vue 2，凭借其简洁的API和强大的功能，在开发者社区中赢得了广泛的认可。然而，随着项目规模的增长，理解和掌握更高级的概念变得至关重要。本文将深入探讨 Vue 2 中的关键进阶主题：组件开发、组件通信、异步更新机制以及自定义指令。
vue.js学习知识点（汇总）
m0_67307574的博客
11-23 1755
功能总结：① 列表渲染：v-for key 的设置 {{ }} 插值表达式② 删除功能v-on 调用传参 filter 过滤 覆盖修改原数组③ 添加功能v-model 绑定 unshift 修改原数组添加④ 底部统计 和 清空数组.length累计长度覆盖数组清空列表v-show 控制隐藏。
Vue2 第十四节 scoped样式和本地存储
星星之火的语言c学习
08-02 446
1.scoped样式2.本地存储。
vue-vue2脚手架4-插件,scoped样式
飘然渡沧海的博客
11-05 199
vue-vue2脚手架4-插件,scoped样式 插件 1. 功能：可以把多个组件共用的配置提取成一个混入对象 2. 使用方式： 第一步定义混合： ``` { data(){....}, methods:{....} .... } ``` 第二步使用混入： ​ 全局混入：```Vue.mixin(xxx)``` ​ 局部混入：```mixins:['xxx'] ``` 插件 1. 功能：用于增强Vue 2. 本质：包含install方法的一个对象，install的第一个
每日一学vue2:scoped样式属性、nanoid、记录本小案例（基础版）
小淼淼的博客
09-23 929
oen piece是真是存在的！！！
Vue2基础篇-26-scoped属性
Alan0517
12-09 195
scoped属性
vue2的scoped 原理
GXY1551705593的博客
07-22 518
Vue 2 的 Scoped CSS 通过 PostCSS 插件实现样式隔离，核心原理是为组件 DOM 添加唯一 data-v-xxxx 属性并重写 CSS 选择器。编译时，Vue 为组件元素添加唯一哈希属性，同时在样式规则后追加对应的属性选择器，确保样式只作用于当前组件。通过深度选择器（>>>//deep/）可实现子组件样式穿透。这种方法既能避免样式污染，又保持了选择器权重不变，是 Vue 组件化开发中实现 CSS 隔离的高效方案。
vue2-scoped关键字、组件通信
m0_54235152的博客
08-08 288
data中的数据是自己的，可以改props中的数据是父组件的，不能直接改，使用$emit()才能改也就是父组件data中的数据单向流动到子组件props。
Vue2插件及scoped样式
sinat_29304113的博客
12-08 202
插件 功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。 定义插件： 对象.install = function(Vue,options){ //1.添加全局过滤器 Vue.filter(...) //2.添加全局指令 Vue.directive(...) //3.配置全局混入（合） Vue.mixin(...) //4.添加实例方法 Vue.prototype.$myMethd = function(){} Vue.p
Vue2 Vue3 Scoped 样式穿透
潮汐未见潮落的博客
05-11 3862
Vue2 Vue3 Scoped 样式穿透
vue2 provide/inject实现响应式数据更新
yangzhibiaoXS的博客
05-13 1354
vue2 provide/inject 实现响应式数据更新
初学Vue（全家桶）-第12天（vue2）：插件、scoped属性、WebStorage浏览器存储
lalala_dxf的博客
06-04 297
插件、scoped属性、WebStorage浏览器存储
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

章小絮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值