网站设计属于什么经营范围,外贸网站建设预算,济南市住房城乡建设网,建设部网站监理变更为什么会需要使用defineModel()
注意#xff1a;defineModel() 需要在3.4及以上版本才可使用#xff1b;
组件之间通讯#xff0c;通过 props 和 emits 进行通讯,是单向数据流#xff0c;比如#xff1a;props是自上而下的#xff08;父组件数据修改导致子组件更新defineModel() 需要在3.4及以上版本才可使用
组件之间通讯通过 props 和 emits 进行通讯,是单向数据流比如props是自上而下的父组件数据修改导致子组件更新而自己不能修改父组件传入的 props属性而emits是自下而上的子组件通过事件触发父组件事件
defineModel() 返回的值是一个 ref。 它可以像其他 ref 一样被访问以及修改不过它能起到在父组件和当前变量之间的双向绑定的作用 defineModel() 实现原理defineModel() 的双向绑定是在编译之后创建了一个model的ref变量以及一个modelValue的props并且watch了props中的modelValue当子组件中的modelValue更新时会触发update:modelValue事件当父组件接收到这个事件时候同时更新父组件的变量 它的 .value 和父组件的 v-model 的值同步 当它被子组件变更了会触发父组件绑定的值一起更新。
1、defineModel() 的双向绑定
父组件
templatediv classmy-define-moduleThis is a defineModel text page.// 使用v-model 绑定person对象ChildMy v-modelperson/hr{{ person.name }}---{{ person.age }}/div/templatescript setupimport ChildMy from ./child.vueimport { ref } from vue const person ref({name: Andy,age: 11})/script子组件
template
div classmy-define-modulechild -- {{person.name}} // 第一次打印的是父组件传递过来的 Andyel-button typeprimary clickupdatedNamechild btn/el-button
/div
/template
script setup
import { ref, reactive } from vue
// defineModel() 返回的是一个ref对象
const person defineModel({name: child,age: 18
})
console.log(personchild, person.value)
const updatedName () {// 子组中更新person 属性会同时更新父组件的person属性person.value.name ${person.value.name}$person.value.age person.value.age 1
}
/script2、defineModel() 创建多个v-model
注意需要都是基本类型不能是引用类型否子组件读到的是undefined 如图 父组件
templatediv classmy-define-moduleThis is a defineModel text page.!-- ChildMy v-modelperson/ --// 传入多个v-model时的person是Object导致子组件中person无法通过defineModel获取ChildMy v-model:personperson v-model:jobjob v-model:numnum/hr{{ person.name }}---{{ person.age }} /div/templatescript setupimport ChildMy from ./child.vueimport { ref } from vue const person ref({name: Andy,age: 11})// 初始化定义时当父组件没有传入默认值时候子组件中的job值不父组件的值不同步子组件展示的是子组件初始化的值--前端const job ref()const num ref(3)/script子组件 template
div classmy-define-modulechild -- {{person.name}}hr--job--{{ job }}hrnum---{{num}}el-button typeprimary clickupdatedNamechild btn/el-buttonel-button typeprimary clickupdatedJobchild job/el-buttonel-button typeprimary clickupdatednumchild num/el-button
/div
/template
script setup
import { ref, reactive } from vue
// defineModel() 返回的是一个ref对象
const person defineModel({name: child,age: 18,
})
const num defineModel(num, 2)
const job defineModel(job, 前端)
console.log(--job---, job) // value 前端
console.log(--num---, num) // value 3
console.log(personchild, person) // value undefined
/script如图
3、defineModel() 设置额外参数如类型、默认值
const job defineModel(job, {default: , type: String, required: true})
编译后的
props{job:{default: ,type: String,required: true}
}4、defineModel() 添加自定义修饰符
需要使用数组解构方法获取 model 和 modifiersmodel即为ref对象modifiers即为修饰符对象 如 父组件
templatediv classmy-define-moduleThis is a defineModel text page.ChildMy v-model.upLowjob/hrparents--s{{ job }} // 初始化 5/div/templatescript setupimport ChildMy from ./child.vueimport { ref } from vue const job ref(5)/script子组件
template
div classmy-define-modulehr--job--{{ model }}hrel-button typeprimary clickupdatedJobchild job/el-button
/div
/template
script setup
import { ref, reactive } from vue
const [model, modifiers] defineModel({get(value) {console.log(-get-job---, value)return value},set(value) {if (modifiers.upLow) { // 有upLow修饰符的v-model 会将值累加 22return value 22 }return value}
})
console.log(--job-model--, model)
console.log(--job-modifiers--, modifiers)
const updatedJob () {model.value model.value 10 // 更新model.value的值
}
/script
