1、组件的三大组成部分（结构/样式/逻辑）
注意点：
1、结构只能有一个根元素
2、全局样式（默认），影响所有组件；局部样式，scoped下样式，只作用于当前组件
3、el根实例独有，data是一个函数，其他配置项一致
样式注意点：
默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题
1、全局样式：默认组件中的样式会作用到全局
2、局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件
scoped原理
1、当前组件内标签都被添加上data-v-hash值的属性
2、css选择器都被添加[data-v-hash]的属性选择器
最终效果：必须是当前组件的元素，才会有这个自定义的属性，才会被这个样式作用到
2、data函数
一个组件的data选项必须是一个函数，保证每个组件实例维护独立的一份数据对象
例如：
data() {
return {
count: 100
}
},每次创建新的组件实例，都会新执行一次data函数，得到一个新对象
3、组件通信
组件通信，就是指组件与组件之间的数据传递
组件的数据是独立的，无法直接访问其他组件的数据
想用其他组件的数据->组件通信
组件关系分类：
1、父子关系
2、非父子关系
1、父子关系通信
1、父组件通过props将数据传递给子组件
具体流程，在父组件中，如果调用了子组件，需要给子组件添加一个自定义属性，在头标签：
<div :属性名="传递的参数名"></div>之后在子组件中添加配置项props
props:['属性名']即可在子组件中使用父组件的参数
2、子组件利用$emit通知父组件修改更新
具体流程，在子组件中使用$emit，可能会放在函数里
handClick () {
this.$emit('通知','修改后的数据')
}然后在父组件中的子组件内加上@changTitle="函数名"，用于监听事件
创建一个函数，函数的参数为新参数的名字，最后在函数内进行修改
2、prop详解
prop定义：组件上 注册的一些 自定义属性
Prop作用：向子组件传递数据
特点：可以传递任意数量和任意类型的prop
校验：
作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示，帮助开发者，快速发现错误
语法：
1、类型校验
props: {
校验的属性名：类型
}2、非空校验
3、默认值
4、自定义校验
props:{
校验的属性名：{
type：类型，
required：true，//是否必填
default：默认值，//morz
validator（value） {
//自定义校验逻辑
return 是否通过校验
}
}
}prop&data
共同点：都可以给组件提供数据
区别：
data的数据是自己的，可以随意修改
prop的数据是外部的，不能直接改，要遵循单向数据流
3、非父子关系通信
利用event bus事件总线
作用：完成非父子组件之间，进行简易消息传递（复杂场景，vuex）
1、创建一个都能访问到的事件总线（空Vue实例），utils/EventBus.js
import Vue form 'vue'
const Bus = new Vue()
export default Bus2、接收方，监听Bus实例的事件
created() {
Bus.$on('sendMsg',(msg) => {
this.msg=msg
})
}3、发送方，触发Bus实例的事件
Bus.$emit('sendMsg','这是一个消息')4、v-model原理
原理：v-model本质上是语法糖，例如在输入框上，就是value属性和input事件的合写
作用：提供双向数据绑定
1、数据变，视图跟着变:value
2、视图变，数据跟着变@input
注意：$event用于在模板中，获取事件的形参
5、表单类组件封装&v-model简化代码
1、表单类组件封装
1、父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
<BaseSelect :cityId="selectId" @事件名="selectedId=$event"></BaseSelect>2、子传父：监听输入，子传父传值给父组件修改
<select :value="cityId" @change="handleChange"></select>props: {
cityId: String
} methods: {
handleChange(e) {
this.$emit('事件名',e.target.value)
}
}2、父组件v-model简化代码，实现父子双向绑定
1、子组件中：prop通过value接收，事件触发input
2、父组件中：v-model给组件直接绑数据(:value+@input)
<BaseSelect v-model="selectId"></BaseSelect>6、.sync修饰符
作用：可以实现子组件与父组件数据的双向绑定，简化代码
特点：prop属性名，可以自定义，非固定为value
场景：封装弹框类的基础组件，visible属性 true显示false隐藏
用法，直接在属性名后加上即可
在子组件中利用props接收，并且用$emit通知，其中的事件名为update:属性名
7、ref和$refs
作用：利用这个可以用于获取dom元素，或组件实例
特点：查找范围->当前组件内（更精确稳定）
1、获取dom：
目标标签-添加ref属性，属性值自拟
恰当时机，通过this.$refs.ref属性值，获取目标标签
要在mounted后才能进行获取
2、获取组件实例
目标组件，添加ref属性
恰当时机，通过this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法
8、Vue异步更新
使用$nextTick:等dom更新完后，才会触发执行此方法里的函数
this.$nextTick(() => {
this.$refs.inp.focus()
})