红色博客网站源码,wordpress门户网站,西安做网站企业,中国100强企业排行榜目录 v-moel
v-model的原理
v-model用在组件标签上
方式 defineModel()简写
ref属性
获取原生DOM
获取组件实例
nextTick() v-moel
v-model#xff1a;双向数据绑定指令
数据变了#xff0c;视图跟着变#xff08;数据驱动视图#xff09;视图变了#xff0c;数…目录 v-moel
v-model的原理
v-model用在组件标签上
方式 defineModel()简写
ref属性
获取原生DOM
获取组件实例
nextTick() v-moel
v-model双向数据绑定指令
数据变了视图跟着变数据驱动视图视图变了数据也会跟着变
v-model的原理
作用在原生输入框时本质就是:value数据input数据输入框的值的组合
如下:
第1行代码和第2行代码所实现的效果是一样的.
:valuemsg实现了v-model的数据驱动视图inputmsg $event.target.value实现了v-model的视图驱动数据$event.target获得触发input监听事件的dom对象。 template input typetext v-modelmsg/ //1 input typetext :valuemsg inputmsg $event.target.value/ //2 /template script setup import { ref } from vue const msg ref(aaaa) /script v-model用在组件标签上 XXX v-model数据/XXX是一个组件 等价于 XXX :modelValue数据 update:modelValue数据新值 / 这种方式使用到了父传子的方式 modelValue属于自定义类型子组件需要接收。 XXX :modelValue数据 update:modelValue数据新值 /方式
父组件
script setupimport { ref } from vueimport MyOption from ./components/MyOption.vue;const activetedIdref(333)
/script
templateMyOption :modelValueactivetedId update:modelValueactivetedId$event/
/templatestyle scoped/style
子组件
template
select :valuemodelValue changeemit(update:modelValue, $event.target.value) v-ifmodelValue.length0option value111北京/optionoption value222上海/optionoption value333广州/option option value444深圳/optionoption value555杭州/optionoption value666南京/option
/select
/templatescript setupdefineProps({modelValue: String,Required: true})const emitdefineEmits()
/scriptstyle scoped/style defineModel()简写
父xxx v-model父的响应式数据 /子const modeldefineModel()子组件可以对这个model响应式数据做读、写操作
父组件
script setupimport { ref } from vueimport MyOption from ./components/MyOption.vue;const activetedIdref(333)
/script
templateMyOption v-modelactivetedId/
/templatestyle scoped/style
子组件
template
select v-modelmodeloption value111北京/optionoption value222上海/optionoption value333广州/option option value444深圳/optionoption value555杭州/optionoption value666南京/option
/select
/templatescript setup//defineModel()的返回值是一个ref数据并且可以在子组件直接操作这个ref数据子组件修改这个数据会引起父组件的数据的同步更新const modeldefineModel()
/scriptstyle scoped/style
ref属性
这里要与ref函数做区别这里ref属性是作用在标签上的属性是vue新增的原生不具备这个属性的。
作用
用来获取原生DOM或组件实例进而调用组件提供的方法
获取原生DOM
先创建一个ref响应式数据将标签的ref属性绑定创建好的ref响应式数据通过divRef.value获取到div/div
template
div refdivRefSome text...
/div
/templatescript setupimport { onMounted, ref } from vueconst divRefref(null)onMounted(() {divRef.value.style.colorblue })
/script
获取组件实例
如下使用示例
MyFrom提供的校验方法和账号、密码输入框根组件依靠ref属性调用子组件提供的方法
MyFrom.vue
组件需要让外部使用的函数需要对外暴露类似于导出defineExpose({ })
templatediv classfrom-container账号input typetext v-modelusernamebr /br /密码input typepassword v-modelpasswordbr /br //div
/templatescript setupimport { ref} from vueconst username ref()const password ref() const validate(){return username.valueadmin password.value123456}defineExpose({validate})
/scriptstyle scoped/style
App.vue
template
divMyForm reffromRef/button clickonLogin登录/button
/div
/templatescript setupimport {ref} from vueimport MyForm from ./components/MyForm.vueconst fromRefref(null)const onLogin(){if(fromRef.value.validate()){console.log(success)}else{console.log(fail)}}
/scriptstyle scoped/style
nextTick()
nextTick() 是vue3提供的一个方法
作用 当数据变了想获取更新后的DOM需要把代码写在这个方法的回调中。 什么时候使用这个方法 当数据变了想DOM操作如果直接拿不到在这个方法的回调中去获取。 如下当v-if的判断值为true后DOM还未更新此时就需要在nextTick() 中操作更新后的DOM script setupimport {ref,nextTick} from vueconst onEdit(){isShowEdit.valuetrue//此时显示文本框但是在vue3中DOM的更新是异步的此时直接获取更新后的DOM是拿不到的因为还没有更新nextTick((){inputRef.value.focus()})}
/script
