1 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>
2 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> </div> </template> <script> export default { props: { isShow: Boolean, } } </script> <style scoped> .base-dialog-wrap { width: 300px; height: 200px; box-shadow: 2px 2px 2px 2px #ccc; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 10px; } .base-dialog .title { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000; } .base-dialog .content { margin-top: 38px; } .base-dialog .title .close { width: 20px; height: 20px; cursor: pointer; line-height: 10px; } .footer { display: flex; justify-content: flex-end; margin-top: 26px; } .footer button { width: 80px; height: 40px; } .footer button:nth-child(1) { margin-right: 10px; cursor: pointer; } </style>
6.总结
1.父组件如果想让子组件修改传过去的值 必须加什么修饰符？
2.子组件要修改父组件的props值 必须使用什么语法？
3 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: { text: 'ECharts 入门示例', }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], }, ], }) }, } </script> <style scoped> .base-chart-box { width: 400px; height: 300px; border: 3px solid #000; border-radius: 6px; } </style>
4 异步更新 & $nextTick
1.需求
编辑标题, 编辑框自动聚焦
- 点击编辑，显示编辑框
- 让编辑框，立刻获取焦点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWwVXolt-1692978673100)(assets/1682394495346.png)]
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 { data() { return { title: '大标题', isShowEdit: false, editValue: '', } }, methods: { editFn() { // 显示输入框 this.isShowEdit = true // 获取焦点 this.$refs.inp.focus() } }, } </script>
3.问题
“显示之后”，立刻获取焦点是不能成功的！
原因：Vue 是异步更新DOM (提升性能)
4.解决方案
$nextTick：等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() => { this.$refs.inp.focus() })
注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例
