目录
一、组件的三大组成部分
二、组件的样式冲突scoped
三、scoped原理
编辑
四、data是一个函数
五、组件通信
1.概念：是指组件与组件之间的数据传递，组件的数据是独立的，无法直接访问其他组件的数据，想用其他组件的数据就要用到组件通信。
2.组件关系分类：
3.父子通信流程图
六、props详解
七、非父子通信
1.eventbus事件总线(可以一传多)--->作用是在非父子组件之间，进行简易的消息传递（复杂场景--->vuex）
2.provide和inject
八、v-model原理
1.v-model：
2.表单类组件封装和v-model简化代码
2.1表单类组件封装
2.2父组件v-model简化代码，实现子组件和父组件数据的双向绑定
九、.sync修饰符
十、ref和refs
十一、vue异步更新和$nextTick
十二、自定义指令
1.自定义指令-注册的语法
2.自定义指令-指令的值
十二、插槽
1.默认插槽（组件内定制一处结构）
2.具名插槽（可以定义多处结构）
3.作用域插槽（插槽传参的语法）
一、组件的三大组成部分
结构<template>---vue2只能有一个根元素
样式<style>---默认是全局样式，影响所有组件；局部样式：scoped下的样式，只作用于当前组件
逻辑<script>---el是根实例所独有的，data是一个函数，其他配置项不变
二、组件的样式冲突scoped
默认情况：写在组件中样式会全局生效---因此很容易造成多个组件之间的样式冲突问题
全局样式：默认组件中的样式会作用到全局
局部样式：可以给组件加上scoped属性可以让样式只作用于当前组件
三、scoped原理
给当前组件模板的所有元素，都会添加上一个自定义属性data-v-hash值，可以利用hash值区分开不同的组件，CSS选择器后面被自动处理，添加了属性选择器div[data-v-hash值]（必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到---当前组件内的标签都会被添加data-v-hash值的属性）
<style lang="less" scoped>
.footer-container {
background-color: white;
height: 50px;
border-top: 1px solid #f8f8f8;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 10px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}
</style>
四、data是一个函数
一个组件的data选项，必须是一个函数---保证每个组件实例维护独立的一份数据对象
data(){
return{
数据对象
}五、组件通信
1.概念：是指组件与组件之间的数据传递，组件的数据是独立的，无法直接访问其他组件的数据，想用其他组件的数据就要用到组件通信。
2.组件关系分类：
父子关系---props和$emit
非父子关系---provide&inject和eventbus
3.父子通信流程图
父组件通过props将数据传递给子组件
子组件利用$emi通知父组件修改更新
- 父传子
- --->给子组件以添加属性的方式传值---->动态属性传值--->:属性名 = "表达式"
- --->子组件内部通过props接收--->数组接收多个传值---->props: ['属性名']
- --->模板中直接使用--->模板字符串{{}}渲染--->{{ 属性名 }}
- 子传父
- --->$emit触发事件，给父组件发送消息通知--->子组件监听事件--->this.$emit('事件名','内容')
- 父组件监听事件--->@事件名 = '父级监听事件'
- 提供处理函数，形参中获取参数--->this.属性名 = 形参
六、props详解
定义：子组件上注册的一些自定义属性
作用: 向子组件传递数据
特点： 可以传递任意数据，任意类型的prop
props校验： 为组件中的prop指定严正要求，不符合要求，控制台会有错误提示
props: {
校验的属性名: {
type:类型,--->Number,String,Object,Array,Function,Boolean,
required:true, //是否必填
default:默认值, //默认值和是否必填选择其一即可
vaildator(value){
// 自定义校验逻辑
return 是否通过校验
}
}
}单向数据流
父组件的prop更新，会单向的向下流动影响到子组件从而影响到视图
prop和data单向数据流的特点：
- 共同点：都可以给组件提供数据
- 区别：data的数据是自己的，可以随意更改；prop的数据是外部的，不能直接更改，要遵循单向数据流的原则（谁的数据谁负责）
七、非父子通信
1.eventbus事件总线(可以一传多)--->作用是在非父子组件之间，进行简易的消息传递（复杂场景--->vuex）
步骤：
- 创建一个都能访问到的事件总线(空vue实例)---作为媒介
- 接收方的组件监听bus实例事件---$on('事件名')
- 发送方的组件触发bus实例事件---$emit('事件名')
2.provide和inject
作用：跨层级共享数据
步骤：
- 父组件provide提供数据---->provide () { return {数据} }
- 子孙组件inject取值使用---->inject： []
- 简单类型传递的非响应式，复杂类型传递的响应式数据
八、v-model原理
原理：v-model本质上是一个语法糖， 例如利用在输入框上就是value属性和input事件的合写（应用与不同的表单元素，设置的dom属性和绑定的事件稍有不同）
作用：提供数据的双向绑定
1.v-model：
- 数据变，视图跟着变---> :value
- 视图变，数据跟着变--->@input （监听事件，监听输入框的输入）
注意$emit用在模板中的时候，获取事件的形参，input和click事件的形参是e事件对象
在行内中想要拿到当前事件的形参(事件对象)---->$event.target
2.表单类组件封装和v-model简化代码
2.1表单类组件封装
- 父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
- 子传父：监听输入，子传父传值给父组件修改
e.target触发事件的事件源，$emit获取事件的形参，下拉菜单的绑定事件是change，因为数据不是子组件的，所以不能使用v-model直接修改，否则会报错
2.2父组件v-model简化代码，实现子组件和父组件数据的双向绑定
- 子组件中props通过value接收，事件触发$emit（value和input事件两者缺一不可）
- 父组件中：v-model给组件直接绑定数据
九、.sync修饰符
作用：可以实现子组件与父组件数据的双向绑定，简化代码
特点：prop属性名可以自定义，非固定为value
本质是 :属性名和@事件:属性名合写
:属性.sync === :属性+@事件：属性名
十、ref和refs
作用：利用ref和refs可以获取dom元素或者组件实例
特点：查找范围--->当前组件内（更加精确稳定）
querySelector的查找范围是整个页面（容易出现找错的情况）
例如：获取dom
步骤：
- 目标标签----添加ref属性
- 恰当时机mounted内部（操作dom的生命周期函数）通过this.ref.ref属性值来获取目标标签
<div ref="chartRef">我是渲染图表的容器</div>mounted () { console.log(this.$refs.chartRef)}十一、vue异步更新和$nextTick
vue是异步更新dom以便于提升性能
$nextTick是等dom更新后，才会触发执行此方法里面的函数体
<template>
<div class="app">
<div v-if="isShowEdit">
<input type="text" v-model="editValue" ref="inp" />
<button>确认</button>
</div>
<div v-else>
<span>{{ title }}</span>
<button @click="editFn">编辑</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: '大标题',
isShowEdit: false,
editValue: '',
}
},
methods: {
editFn() {
// 显示输入框
this.isShowEdit = true
// 获取焦点
this.$refs.inp.focus()
} },
}十二、自定义指令
内置指令：v-html，v-model，v-for...等
每个指令都有自己各自独立的功能，自定义指令可以封装一些dom操作，扩张额外的功能，比如说v-focus自动聚焦，v-loading控制加载，v-lazy图片懒加载...
1.自定义指令-注册的语法
全局注册的语法：
vue.directive('指令名',{
inserted(el){
//可以对el标签扩展额外的功能
el.focus
}
})局部注册的语法：
directives: {
指令名: {
inserted(el) {
// 可以对el标签扩展额外的功能
el.focus
}
}
}使用：v-指令名
2.自定义指令-指令的值
语法：在绑定指令时，可以通过"等号"的形式为指令绑定具体的参数值-----v-指令名 = "指令值"
通过binding、value可以拿到指令值，指令值修改会触发update函数
update指令的值修改时触发---提供的值变化后，dom更新的逻辑
十二、插槽
作用：让组件内部的一些结构支持自定义
1.默认插槽（组件内定制一处结构）
插槽的基本语法：
- 组件内需要定制的结构部分，改用<slot></slot>占位
- 使用组件时，<MyDialog>在这里传入结构替换slot</MyDialog>
<div class="box">
<slot> 也可以在这里输入默认的内容（也称为后备内容） </slot>
</div><MyDialog>
'输入内容，在这里输入可以替换slot整体；如果不输入内容则默认使用后备内容'
</MyDialog>2.具名插槽（可以定义多处结构）
slot有了name属性之后就是具名插槽，通过template将其包裹成一个整体----分发结构
语法：
- 多个slot使用name属性区分名字----<slot name= "名字"> </slot>
- template配合v-slot:名字来分发对应标签（可以简写为#名字）
//第一种写法 <MyDialog> <template v-slot:名字></template> </MyDialog> //简写语法 <MyDialog> <template #名字></template> </MyDialog>
3.作用域插槽（插槽传参的语法）
定义：在定义slot插槽的同时，是可以传值的，给插槽上可以绑定数据，将来使用组件时可以用
语法：
- 给slot标签以添加属性的方式传值
- 所有被添加的属性都会被收集到一个对象之中
- 在template中通过 `#插槽名=obj`接收，默认插槽名为default，具名插槽则为`#具名插槽=obj`--obj是变量名可以自定义，也可以对obj进行结构