v-model进阶+ref+nextTick

一、v-model进阶

复习 v-model

v-model: 双向数据绑定指令

数据 <-> 视图: 数据和视图相互影响, 因此被称为双向数据绑定指令

1> 数据变了, 视图也会跟着变 (数据驱动视图)

2> 视图变了, 数据也会跟着变

1. v-model 原理

v-model只是一个语法糖, 比较好用, 可以减少代码量, v-model 作用再原生的 input 上本质就是给input传了value属性(v-bind绑定value属性,从而数据可以影响视图),并且监听了input事件,通过input事件拿到输入框的值(实现视图影响数据)

本质: :value = "数据" + @input="数据 = 输入框的值" (v-bind,v-on)

我们先使用v-bind/: 实现数据影响视图

注意: input 里面的value值是输入框里面的默认值

现在我们实现视图影响数据, 把输入框里面输入值, 然后影响数据(msg里面会变),此时我们需要监听输入框, 给它加一个监听事件(监听视图的变化, 然后数据也跟着变)

而这个输入框的值,需要这么拿: input是一个原生事件, 原生事件在触发的是有一个事件对象的,此时需要通过$event来获取这个事件对象,$event.target拿到的就是这个input标签本身,$event.target.value拿到的就是原生input的值

<script setup>
import { ref } from 'vue';
const msg = ref('')
</script><template><!-- v-model 实现双向数据绑定 --><p>{{ msg }}</p><!-- <input type="text" v-model="msg" /> --><!-- 自己实现双向数据绑定 --><!--v-bind + @input (v-on)  --><br><!-- 此时v-bind只能够数据影响视图 --><!-- 使用原生事件, 获取到input里面的值然后通过赋值操作影响数据 --><input :value="msg"@input="msg=$event.target.value"></template><style scoped></style>

2. v-model用在组件上

v-model作用在组件标签上:

<Xxx v-model="数据"/>,Xxx是一个组件/自定义标签

上述代码完全等同于

注意: 在组件上使用v-model,其实就是要实现处理 modelValue属性和 update:modelValue 事件

关于为什么在子组件不能使用v-model, v-bind是单向的,因此不影响

我们此处需要,每次选择哪个城市, 就把它的value值传给父组件里面的activeId

其中父组件的$event是emit传过来的参数, 子组件的$event是事件对象,$event.target 是原生DOM标签, $event.target.value 是标签的值

App.vue

<script setup>
//导入组件
import MySelect from './component/MySelect.vue';
import { ref } from 'vue'
//收集当前选中的城市 id
const activeId = ref('333')
</script>
<template><!-- 使用组件 --><!-- <MySelect v-model="activeId" /> --><!-- 原理 --><!-- 父传子接 --><!-- 组件标签上的 $event 指的是 emit 传递来的参数 --><MySelect :modelValue="activeId" @update:modelValue="activeId=$event"/>
</template><style scoped></style>

MySelect.vue

<script setup>
const props = defineProps({//接收父传子的 modelValue属性modelValue: String
})
const emit = defineEmits()
</script>
<template><!-- 原生标签上的 $event 就是事件对象 --><!-- $event.target: select 原生DOM --><!-- $event.target.value: 选中的 option 的 value--><select :value="props.modelValue" @change="emit('update:modelValue', $event.target.value)"><option value="111">长沙</option><option value="222">上海</option><option value="333">广州</option><option value="444">苏州</option></select>
</template><style scoped></style>

3. 使用 defineModel() 简化上述代码

v-model用在组件上, 子组件代码可以简化:

子组件用 defineModel() 接收父传子的 v-model 数据, defineModel() 返回一个 ref 响应式数据, 这个响应式数据的初始值就是父传递给子的 v-model 数据的值, 并且该数据可读可写, 子组件可以直接修改这个响应式数据, 会同步到父组件的数据当中.

今后组件上用v-model指令的格式如下:

父: <Xxx v-model = "父的响应式数据"/>

子: const model = defineModel() 子可以对model 做读写操作

注意: defineModel() 只是一个语法糖(比较好用), 本质还是一下俩部分:

1> const props = defineProps({modelValue:String})

2> const emit defineEmits() emit('update:modelValue'.新值)

具体代码

二、ref

ref 属性: 和之前学习的 ref 函数不一样

1. ref 属性是什么: 是作用在标签上的属性, 是vue新增的, 原生不具备的这个属性

2. ref 属性的作用: 用来获取原生 DOM 或组件实例(进而调用组件提供的方法)

3. 使用步骤

1> 准备一个 ref 数据, 并绑定在想获取的标签上, <Xxx ref = "ref 响应式数据"/>

2> 恰当时机,通过 ref.value 来获取原生DOM 或组件实例

4. 以获取原生DOM为例

具体代码

<script setup>
import { onMounted, ref } from 'vue';
//准备 ref 响应式数据
const divRef = ref(null)
//组件挂载后
onMounted(() => {// ref 拿到原生 DOM div// console.log(divRef.value)// 设置字体颜色(DOM操作)divRef.value.style.color = 'blue'
})
</script>
<template><!-- 给目标元素添加 ref 属性并绑定数据 --><div ref="divRef">xiaohei</div>
</template><style scoped></style>

5. 小案例: 绘制一个简单的图表

1> 准备MyChart组件, 在这个组件总来绘制图表, 使用在App中

2> 在组件中, 准备一个盒子, 给盒子设置宽高

3> 在组件挂载后, 获取这个div, 绘制图表

4>绘制图表

1. 首先我们要用到一个第三方库: ECharts

获取 ECharts - 入门篇 - 使用手册 - Apache ECharts

npm install echarts

2. 在MyChart组件中, 组件挂载后获取盒子, 其他的代码抄官方的即可

具体代码

App.vue

<script setup>
import MyChart from './component/MyChart.vue';        
</script><template><MyChart />
</template><style scoped></style>

MyChart.vue

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
const divRef = ref(null)
onMounted(() => {//基于准备好的dom, 初始化echars实例const myChart = echarts.init(divRef.value)//绘制图表myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]})
})
</script><template><div class="chart-box" ref="divRef"></div>
</template><style scoped>
.chart-box {width: 400px;height: 300px;margin: 100px auto;border: 3px solid #000;
}
</style>

6. 调用组件的方法

ref属性: 获取组件实例, 进而是为了调用组件给我们提供的方法

1> 准备MyForm表单组件, 主要需要提供一个检验的方法

2> 在App中使用MyForm组件, 添加登录按钮, 今后想知道点击了登录按钮之后, 只校验成功了还是失败了, 进而可以做后续的工作

我们子组件可以使用 defineExpose 来把属性和方法进行导出, 然后父组件就可以导入子组件然后进行使用

整体流程

相当于 ref属性值链接的就是一个子组件的组件实例, 子组件的组件实例里面, 使用defineExpose方法新增了组件的属性和方法, 我们就可以在父组件里面来进行使用了

具体代码

MyForm.vue

<script setup>
//表单组件提供的校验方法
const validate = () => {return Math.random() > 0.5 ? true : false
}
//需要对外暴露.类似于导出
defineExpose({ccc: 100,validate
})
</script><template><div class="form-box">账号: <input type="text"><br /><br />密码: <input type="password"><br /><br /></div>
</template><style scoped></style>

App.vue

<script setup>
import MyForm from './component/MyForm.vue';
import { onMounted, ref } from 'vue';
const formRef = ref(null)
onMounted(() => {console.log(formRef.value)//获取 MyForm 组件实例//调用默认导出的方法console.log(formRef.value.validate())console.log(formRef.value.ccc)
})
//登录
const onLogin = () => {//做表单校验if (formRef.value.validate()) {console.log('ok')} else {console.log('不 ok')}
}
</script>
<template><div class="login-box"><!-- 组件上使用 ref,通过子组件使用defineExpose暴露属性/方法从而进行使用 --><MyForm ref="formRef" /><button @click="onLogin">登录</button></div>
</template><style scoped></style>

三、nextTick()

1. 什么是 nextTick(): 是 vue3 给我们提供的一个方法

2. nextTick()的作用: 当数据变了, 想获取更新后的 DOM, 需要把代码写在这个方法的回调中

需求:

编辑标题, 编辑框自动聚焦

1> 点击编辑, 显示编辑框

2> 让编辑框, 立刻获取焦点

点击编辑显示编辑框和确认框

让编辑框, 立刻获取焦点, 此时出现一个问题

问题: 当数据变了, 发现获取 DOM 拿不到

原因: vue3中, 当数据变了, DOM 的更新是异步的;

也就是数据变了, 想立即获取最新的 DOM 是拿不到的, 此时DOM并没有更新

解决方案: 利用 nextTick()这个方法,因为在nextTick()函数的回调中DOM会进行更新

3. 什么时候用这个方法(用的很少)

当数据变了, 想DOM操作, 如果直接拿不到, 就可以在nextTick回调中获取.

具体代码:
App.vue

<script setup>
import { ref, nextTick } from 'vue';
const inputRef = ref(null)
//控制是否显示输入框
const isShowEdit = ref(false)
//点击编辑按钮
const onEdit = () => {isShowEdit.value = true;// 问题: 当数据变了, 发现获取 DOM 拿不到// 原因: vue3中, 当数据变了, DOM 的更新是异步的; // 数据变了, 想立即获取最新的 DOM 是拿不到的, 此时DOM并没有更新console.log(inputRef.value)//null//解决: 利用 nextTick()这个方法,因为在nextTick()函数的回调中DOM会进行更新nextTick(() => {console.log(inputRef.value)inputRef.value.focus()})
}
</script>
<template><div class="box"><h3>大标题</h3><button @click="onEdit">编辑</button></div><!-- 使用v-if,默认是不显示 --><div v-if="isShowEdit"><input type="text" ref="inputRef"><button>确认</button></div>
</template>
<style scoped>
.box {display: flex;align-items: center;width: 200px;height: 40px;justify-content: space-between;
}
</style>