十五、非父子通信-provide&inject
1.作用
跨层级共享数据
2.场景
3.语法
- 父组件 provide提供数据
export default { provide () { return { // 普通类型【非响应式】 color: this.color, // 复杂类型【响应式】 userInfo: this.userInfo, } } }
子/孙组件 inject获取数据
export default { inject: ['color','userInfo'], created () { console.log(this.color, this.userInfo) } }
4.注意
- provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
- 子/孙组件通过inject获取的数据，不能在自身组件内修改
十六、v-model原理
1.原理：
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>
2.作用：
提供数据的双向绑定
- 数据变，视图跟着变 :value
- 视图变，数据跟着变 @input
3.注意
$event 用于在模板中，获取事件的形参
4.代码示例
<template> <div class="app"> <input type="text" /> <br /> <input type="text" /> </div> </template> <script> export default { data() { return { msg1: '', msg2: '', }
5.v-model使用在其他表单元素上的原理
不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model
底层处理的是 checked属性和change事件。
不过咱们只需要掌握应用在文本框上的原理即可
十七、表单类组件封装
1.需求目标
实现子组件和父组件数据的双向绑定 （实现App.vue中的selectId和子组件选中的数据进行双向绑定）
2.代码演示
App.vue <template> <div class="app"> <BaseSelect></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> <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 { }
十八、v-model简化代码
1.目标：
父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定
2.如何简化：
v-model其实就是 :value和@input事件的简写
- 子组件：props通过value接收数据，事件触发 input
- 父组件：v-model直接绑定数据
3.代码示例
子组件
<select :value="value" @change="handleChange">...</select> props: { value: String }, methods: { handleChange (e) { this.$emit('input', e.target.value) } }
父组件
<BaseSelect v-model="selectId"></BaseSelect>
十九、.sync修饰符
1.作用
可以实现 子组件 与 父组件数据 的 双向绑定，简化代码
简单理解：子组件可以修改父组件传过来的props值
2.场景
封装弹框类的基础组件， visible属性 true显示 false隐藏
3.本质
.sync修饰符 就是 :属性名 和 @update:属性名 合写
4.语法
父组件
//.sync写法 <BaseDialog :visible.sync="isShow" /> -------------------------------------- //完整写法 <BaseDialog :visible="isShow" @update:visible="isShow = $event" />
子组件
props: { visible: Boolean }, this.$emit('update:visible', false)
5.代码示例
App.vue <template> <div class="app"> <button @click="openDialog">退出按钮</button> <BaseDialog :isShow="isShow"></BaseDialog> </div> </template> <script> import BaseDialog from './components/BaseDialog.vue' export default { data() { return { isShow: false, } }, components: { BaseDialog, }, } </script> <style> </style> BaseDialog.vue <template> <div class="base-dialog-wrap" v-show="isShow"> <div class="base-dialog"> <div class="title"> <h3>温馨提示：</h3> <button class="close">x</button> </div> <div class="content"> <p>你确认要退出本系统么？</p> </div> <div class="footer"> <button>确认</button> <button>取消</button> </div> </div>
6.总结
1.父组件如果想让子组件修改传过去的值 必须加什么修饰符？
2.子组件要修改父组件的props值 必须使用什么语法？
二十、ref和$refs
1.作用
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
2.特点：
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div>
2.获取时通过 $refs获取 this.$refs.chartRef 获
mounted () {
console.log(this.$refs.chartRef)
}
4.注意
之前只用document.querySelect('.box') 获取的是整个页面中的盒子
5.代码示例
App.vue <template> <div class="app"> <BaseChart></BaseChart> </div> </template> <script> import BaseChart from './components/BaseChart.vue' export default { components:{ BaseChart } } </script> <style> </style> BaseChart.vue <template> <div class="base-chart-box" ref="baseChartBox">子组件</div> </template> <script> // yarn add echarts 或者 npm i echarts import * as echarts from 'echarts' export default { mounted() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.querySelect('.base-chart-box')) // 绘制图表 myChart.setOption({ title: {
二十一、异步更新 & $nextTick
1.需求
编辑标题, 编辑框自动聚焦
- 点击编辑，显示编辑框
- 让编辑框，立刻获取焦点
2.代码实现
<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 {
3.问题
"显示之后"，立刻获取焦点是不能成功的！
原因：Vue 是异步更新DOM (提升性能)
4.解决方案
$nextTick：等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() => {
this.$refs.inp.focus()
})
注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例
