侧边栏壁纸
  • 累计撰写 22 篇文章
  • 累计收到 1 条评论

实习日记 04

admin
2022-06-06 / 0 评论 / 7 阅读 / 正在检测是否收录...

今日遇到的问题,修改vant样式一直失效,查询后知道可以使用scoped穿透进行覆盖。

scoped?
首先是需要在样式style的标签中添加scoped,当一个style有了scoped标签后,它的css样式就只运用于当前模块,能够样式模块化。
scoped的原理?
通过postCss实现,首先给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素。之后在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如:[data-v-5558831a])来私有化样式
scoped穿透?
加了scoped属性后在需要覆盖的样式前加/deep/

遇到问题二,在子组件中修改父组件传递过来的props的值

仍旧是写组件遇到的问题,发现使用props传递过来的数据是双向的,子组件对数据进行改变父组件就能看到改变后的数据,而props是单向的,后续问过康哥后发现是自己太不规范了,不能通过这种方式去修改数据,如果需要修改props中的数据必须通过子组件传递信息给父组件,然后父组件中对数据进行修改。

总结一下data和props的区别

props是父组件将其数据传递的一种方式,而当我们从子组件中访问props数据的时候,其实并不拥有它,所以子组件不能对props中的数据进行修改。(修改数据可以成功,但是会很麻烦)
data是当前组件本身私有的,仅供组件本身使用,其他组件不能访问。
props和data都是响应式的数据,但是不能重名。

感悟:如果要修改某个组件的数据,就要通知这个组件让他去修改,而不能擅自在组件中去直接修改其他组件的值。

0

评论 (0)

取消