Vue-4: 组件通信学习

Vue-4

01-scoped组件的样式冲突

---

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

1. 全局样式：默认组件中的样式会作用到全局
2. 局部样式：可以给组件加上 scoped属性，可以让样式只作用于当前组件。

---

<!-- 默认的style样式，会作用于全局样式 
     加上了 scoped属性样式，只会作用于当前组件样式
-->
<style scoped>
div {
    border: 2px solid blue;
    margin: 30px;
}
</style>

推荐加上scoped属性，让组件拥有独立的样式。

---

scoped原理

1. 给当前的组件模板所有元素，都会被添加上自定义属性 data-v-hash 利用hash的值[data-v-5f6a9d56]来区分不同组件
2. css选择器后面被自动处理添加上了属性选择器。div[data-v-5f6a9d56]

最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到。

---

02-data是一个函数

---

1. 一个组件的data选项必须是一个函数。保证每个组件实例，维护独立的一份数据