【VUE2】第三期——样式冲突、组件通信、异步更新、自定义指令、插槽
目录
1 scoped解决样式冲突
2 data写法
3 组件通信
3.1 父子关系
3.1.1 父向子传值 props
3.1.2 子向父传值 $emit
3.2 非父子关系
3.2.1 event bus 事件总线
3.2.2 跨层级共享数据 provide&inject
4 props
4.1 介绍
4.2 props校验完整写法
5 v-model原理
5.1 应用：表单类组件封装
5.1.1 不用v-model的写法
5.1.2 用v-model的写法
5.1.3 sync 修饰符
6 ref 与 $refs
6.1 获取dom元素
6.2 获取组件
7 Vue异步更新与$nextTick
8 自定义指令
8.1 基本用法
8.2 传值
9 插槽
9.1 基本用法
9.2 默认值
9.3 具名插槽
9.4 作用域插槽
1 scoped解决样式冲突
问题：
写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
解决方法：
可以给组件加上scoped 属性,可以让样式只作用于当前组件
如：
<style scoped></style>scoped原理：
自动执行：
当前组件内标签都被添加data-v-hash值 的属性
css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果:
必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
2 data写法
一个组件的 data 选项必须是一个函数
目的是为了：保证每个组件实例，维护独立的一份数据对象
每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象
如：
<script>
export default {data: function () {return {count: 100,}},
}
</script>3 组件通信
总结：
父子通信：
1.props & $emit 父向子传值，子通知父改值 3.1
1.1 v-model简写（不可自定义属性值） 5.1.2
1.2 sync简写（可自定义属性值） 5.1.3
2.ref & $refs 父主动拿子的方法与属性 6.2
非父子通信：
1.event bus 事件总线（任意组件） 3.2.1
2.跨层级通信（同一家族组件） 3.2.2
3.1 父子关系
父组件通过 props 将数据传递给子组件
子组件利用 $emit 通知父组件修改更新
3.1.1 父向子传值 props
步骤：
- 给子组件以添加属性的方式传值
- 子组件内部通过props接收
- 模板中直接使用 props接收的值
App.vue（父组件）：
<template><!-- 主体区域 --><section id="app"><!--第一步：给子组件挂上list属性，并将值赋值给list属性--><TodoMain :list="list" @del="del"></TodoMain></section>
</template><script>
//...data() {return {list: [{id: 1, content: "吃饭"},{id: 2, content: "睡觉"},{id: 3, content: "打豆豆"}],}},}
</script>TodoMain.vue（子组件）：
注意：此处props为简略用法，完整写法见下文4.2 props校验完整写法
<template><!-- 列表区域 --><section class="main"><ul class="todo-list"><!--第三步：直接使用list变量--><li class="todo" v-for="(item, index) in list" :key="item.id"><!--...--></li></ul></section>
</template><script>
export default {//第二步：props接收数据（简略写法）props: ["list"],
}
</script>
3.1.2 子向父传值 $emit
（此处为子通知父，父为被动，下文中的$refs为父主动拿子）
步骤
$emit触发事件，给父组件发送消息通知
父组件监听$emit触发的事件
提供处理函数，在函数的性参中获取传过来的参数
TodoMain.vue（子组件）：
<template><!-- 列表区域 --><section class="main"><button @click="del(item.id)" ></button></section>
</template><script>
export default {
//...methods: {dela(id) {//第一步：触发delb事件this.$emit("delb", id1)}}
}
</script>App.vue（父组件）：
<template><!-- 主体区域 --><section id="app"><!--监听子组件触发的delb事件，监听到后执行delc函数，并将子组件传过来的id1值用id2接收--><TodoMain @delb="delc"></TodoMain></section>
</template><script>
//...
export default {//...methods: {delc(id2) {console.log(id2)},},}
</script>此为最基本写法，可以进一步化简：使用v-model或sync修饰符，具体见 5 v-model原理
3.2 非父子关系
3.2.1 event bus 事件总线
（任意两个组件之间的通信）
非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)
Event Bus（事件总线）可以有多个发送方与多个接收方
第一步：创建事件总线实例：
首先创建一个新的 Vue 实例作为事件总线，通常命名为 eventBus
这个实例就像一个中央枢纽，负责管理所有的事件
因为 Vue 实例本身具有 $on（监听事件）、$emit（触发事件）和 $off（移除事件监听器）方法，所以可以利用这些方法来实现事件的发布和订阅
// EventBus.js
import Vue from 'vue'const Bus = new Vue()export default Bus在使用Bus事件总线时，需要先导入Bus这个实例对象
import Bus from '../utils/EventBus'第二步：订阅事件（监听事件）：
在需要接收数据或响应某个事件的组件中，使用 Bus.$on 方法来监听特定的事件
$on方法接受两个参数：第一个参数是事件名称（字符串）
第二个参数是当事件触发时要执行的回调函数
// 组件 A 中监听事件
Bus.$on('sendMsg', (msg) => {this.msg = msg
})第三步：发布事件（触发事件）：
在需要发送数据或通知其他组件的组件中，使用 eventBus.$emit 方法来触发特定的事件
$emit方法的参数：第一个参数是事件名称（必须与要监听的事件名称一致）
后面参数不限制个数及数据类型，这些参数会传递给监听该事件的回调函数
Bus.$emit('sendMsg', '这是一个消息')第四步：取消事件监听（移除事件监听器）：
（选学）
在组件销毁或不再需要监听事件时，可以使用 Bus.$off 方法来移除事件监听器，防止内存泄漏
Bus.$off([event, callback])参数说明：
event（可选）：要移除的事件名，可以是一个字符串或一个包含多个事件名的数组。如果省略该参数，则会移除所有事件监听器
callback（可选）：要移除的特定回调函数。如果省略该参数，则会移除该事件名下的所有回调函数
3.2.2 跨层级共享数据 provide&inject
（父子、爷孙等之间的通信）
父组件 provide提供数据：
export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}子/孙组件 inject获取数据：
export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}注意：
provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式（推荐提供复杂类型数据）
子/孙组件通过inject获取的数据，不能在自身组件内修改
inject中的属性值值也可以写成对象形式，可以设置的值：
from用于指定从祖先组件注入的属性名。如果不使用from，则默认使用当前定义的属性名作为注入的属性名
default用于指定注入属性的默认值，当祖先组件没有提供对应的属性时，会使用这个默认值
inject: {// 使用 from 指定注入属性的来源名称myUserInfo: {from: 'userInfo',// 设置默认值default: {name: '默认姓名',age: 0}},// 没有使用 from，默认使用当前属性名注入someValue: {default: '默认值'}},4 props
4.1 介绍
定义：
组件上 注册的一些 自定义属性
作用：
向子组件传递数据
特点：
-
可以 传递 任意数量 的prop
-
可以 传递 任意类型 的prop
4.2 props校验完整写法
语法：
props: {校验的属性名: {type: 类型, // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},示例：
<script>
export default {// 完整写法（类型、默认值、非空、自定义校验）props: {w: {type: Number,//required: true,default: 0,validator(val) {// console.log(val)if (val >= 100 || val <= 0) {console.error('传入的范围必须是0-100之间')return false} else {return true}},},},
}
</script>注意：
1.default和required一般不同时写（因为当时必填项时，肯定是有值的）
2.default后面如果是简单类型的值，可以直接写。如果是复杂类型的值，则需要以函数的形式return一个默认
5 v-model原理
v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写
<template><div id="app" ><input v-model="msg" type="text"><input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>
注意：
1.$event 用于在模板中，获取事件的形参
2.不同的表单元素， v-model在底层的处理机制是不一样的，比如给checkbox使用v-model
底层处理的是 checked属性和change事件
5.1 应用：表单类组件封装
5.1.1 不用v-model的写法
（此处就是父子组件通讯的方法 3.1）
App.vue
<template><div class="app"><BaseSelect :selectId="selectId" @changeCity="selectId = $event"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>BaseSelect.vue
<template><div><select :value="selectId" @change="selectCity"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {selectId: String,},methods: {selectCity(e) {this.$emit('changeCity', e.target.value)},},
}
</script><style>
</style>5.1.2 用v-model的写法
注意：使用前需要先基于5.1.1的代码稍作修改
App.vue
<template><div class="app"><!--1.给子组件挂在的属性名为：value 2.监听input事件--><BaseSelect :value="selectId" @input="selectId = $event"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>BaseSelect.vue
<template><div><!--绑定value值--><select :value="value" @change="selectCity"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {//接收value值value: String,},methods: {selectCity(e) {//更改所触发的事件为inputthis.$emit('input', e.target.value)},},
}
</script><style>
</style>完成上述修改后，可以对父组件（App.vue）中的代码进行简化：
原：
<BaseSelect :value="selectId" @input="selectId = $event"></BaseSelect>改：
<BaseSelect v-model="selectId" ></BaseSelect>此种方法缺点也显而易见，固定死了属性名必须传value ，
以下方法可以自定义属性名
5.1.3 sync 修饰符
.sync修饰符 就是 :属性名 和 @update:属性名 合写
<!--父组件-->
<!-- .sync写法 -->
<BaseDialog :visible.sync="isShow" />
--------------------------------------
<!-- 完整写法 -->
<BaseDialog :visible="isShow" @update:visible="isShow = $event" />对比一下上面的v-model
:value="" 变成了 :属性名=""
@事件类型="" 变成了 @update:属性名=""
因此在组件中可以使用自定义属性名了，
但是在子组件触发的事件变成了 update:属性名
//子组件
props: {visible: Boolean
},this.$emit('update:visible', false)除此之外其他与上述一样，本质上还是最基本的props、$emit通信
6 ref 与 $refs
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
查找范围 → 当前组件内(更精确稳定)，
而之前用document.querySelect('.box') 获取的是整个页面中的盒子
6.1 获取dom元素
1.给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div>2.恰当时机，通过 $refs获取 this.$refs.xxx 获取
console.log(this.$refs.chartRef)恰当时机：指的是页面渲染完（mouted时期及以后）
6.2 获取组件
1.给目标组件添加ref属性
<BaseForm ref="baseForm"></BaseForm>2.恰当时机，通过 this.$refs.xxx 获取目标组件
this.$refs.baseForm.组件方法()this.$refs.baseForm.属性名7 Vue异步更新与$nextTick
需求：
编辑标题, 编辑框自动聚焦
-
点击编辑，显示编辑框
-
让编辑框，立刻获取焦点
代码：
<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() } },
}
</script> 问题：
"显示之后"，立刻获取焦点是不能成功的！
原因：Vue 是异步更新DOM (提升性能)
解决方案：
$nextTick：等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() => {this.$refs.inp.focus()
})注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例
8 自定义指令
8.1 基本用法
全局注册：
//在main.js中
Vue.directive('指令名', {inserted(el) {// 可以对 el 标签，扩展额外功能el.focus()}
})局部注册：
//在Vue组件的配置项中
directives: {"指令名": {inserted () {// 可以对 el 标签，扩展额外功能el.focus()}}
}参数介绍：
inserted:被绑定元素插入父节点时调用的钩子函数
el：使用指令的那个DOM元素
注意：
在使用指令的时候，一定要先注册，再使用，否则会报错使用指令语法： v-指令名
如：<input type="text" v-focus/>
注册指令时不用加v-前缀，但使用时一定要加v-前缀
8.2 传值
1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值
<div v-color="color">我是内容</div>2.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数
directives: {color: {inserted (el, binding) {el.style.color = binding.value},update (el, binding) {el.style.color = binding.value}}
}9 插槽
9.1 基本用法
-
组件内需要定制的结构部分，改用<slot></slot>占位
-
使用组件时, 如<MyDialog></MyDialog>标签，内部传入结构替换slot
-
给插槽传入内容时，可以传入纯文本、html标签、组件
9.2 默认值
在 <slot> 标签内，放置内容, 作为默认显示内容
效果：
-
外部使用组件时，不传东西，则slot会显示后备内容
-
外部使用组件时，传东西了，则slot整体会被换掉
9.3 具名插槽
多个slot使用name属性区分名字
template配合v-slot:名字来分发对应标签
v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #
9.4 作用域插槽
作用域插槽不是插槽的一种，插槽只有两种：默认插槽与具名插槽
定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用
使用步骤：
1.给 slot 标签, 以 添加属性的方式传值
<slot :id="item.id" msg="测试文本"></slot>注意：所有添加的属性, 都会被收集到一个对象中
2.在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default
<MyTable :list="list"><template #default="obj"><button @click="del(obj.id)">删除</button></template>
</MyTable>注意：传给组件数据，只能写在组价标签身上，不能写在template上，
但是接收组件的数据（#default）可以写在组件标签上（仅限默认插槽）
插槽与组件的选择：
具有逻辑操作的选组件，修改组件部分标签结构选插槽