VUE相关技术

组件

三大部分

• 结构
• 样式
• 逻辑

样式冲突

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

2.局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

<style scoped>
    div{
        margin: 30px;
    }
</style>

scoped原理：

1. 给当前组件模板的所有元素，都会被添加上一个自定义属性data-v-hash值

   data-v-5f6a9d565 区分开不同的组件

2. css选择器后面，被自动处理，添加上了属性选择器

data是一个函数

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

组件通信

什么是组件通信

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

• 组件的数据是独立的，无法直接访问其他组件的数据

• 想用其他组件的数据 → 组件通信

组件通信解决方案

父子通信流程图

prop校验

prop & data、单向数据流