创作灵感
面试问道了,没答出来,呜呜呜~
v-model实现双向绑定的原理
首先我们要知道,v-model实现的双向绑定其实只是props与emit的简化版本。其中,props负责父组件向子组件传递值,emit负责子组件向父组件传递值。
在不考虑v-model的使用情况下,我们要实现双向绑定,应当是父组件向子组件使用props传值,子组件接收到这个值以后,在子组件内部使用并监视这个值的改变,识别到其改变后,使用emit将新的值传递给父组件,父组件拿到新的值后再去更新该值。
上述情况这样做确实能完成双向绑定,但缺点就是太麻烦了,而且父组件自己还要手动去更新子组件的值,这就丢失了封装的意义了。因此,使用v-model简化这个过程就显得尤为重要了。下面向大家具体介绍一下v-model的使用:
v-model的具体使用
在使用v-model时,正常的格式一般需要指定父组件的哪个值和子组件的哪个值绑定。比如,我们需要绑定输入框组件的输入值,应当有v-model:子组件的值=父组件的值。但是我们在使用element-plus组件等时,发现别人封装的组件并未说明需要在使用v-model时指定子组件的值。这是因为v-model会默认绑定modelValue值。因此我们在封装组件时,如果向要实现v-model进行父子组件值的绑定,子组件就需要接收modeValue值,并监听这个值,如果其发生改变,则向父组件通知更新值。但传统的更新肯定是不行的,我们需要使用自动更新,在emit事件中,添加一个"updata:modelValue"事件即可。
下面就向大家展示一下v-model的一个具体使用:
父组件:
<template>
<div>
<searchComponent class="searchComponent" v-model="content" @returnResults="getResults"/>
<el-divider />
<div class="show">
<el-empty v-if="users.data.length==0" description="空空如也~" />
<div class="everyOne" v-else v-for="item in users.data" :key="item">
<el-avatar class="everyOne-avatar" shape="square" :src="item.avatar_url" />
<div class="everyOne-text">
<el-text line-clamp="1" class="everyOne-name" size="small">姓名:{{ item.name }}</el-text>
<el-text line-clamp="1" class="everyOne-account" size="small">学号:{{ item.account }}</el-text>
<el-text line-clamp="1" class="everyOne-email" size="small">邮箱:{{ item.email }}</el-text>
</div>
<div class="everyOne-tag">
<el-tag class="everyOne-sex" :type="item.sex=='male'?'primary':item.sex=='female'?'danger':'info'">
{{ item.sex=='male'?'男':item.sex=='female'?'女':'保密' }}</el-tag>
<el-tag class="everyOne-isIdentification" :type="item.isIdentification=='0'?'info':'primary'">
{{ item.isIdentification=='0'?'未认证':'已认证' }}</el-tag>
<el-tag class="everyOne-type" :type="item.type=='student'?'primary':'success'">
{{ item.type=='student'?'学生':'教师' }}</el-tag>
</div>
<button class="everyOne-detail" @click="toUserDetail(item.id)">详情>></button>
</div>
</div>
<el-pagination v-if="total!=0" class="pagination" @current-change="changePage" background layout="prev, pager, next" :total="total" />
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import API from '@/untils/axios'
import searchComponent from "@/components/searchComponent.vue"
export default defineComponent({
components:{
searchComponent
},
setup(){
var users:any=reactive({
data:[]
})
var total=ref(0)
var content=ref("2")
function getResults(e:any){
users.data=e.users
total.value=e.total
content.value=e.content
}
function changePage(e:any){//改变当前页
API.get("admin/changeUserPages",{
params:{
content:content.value,
start:(e-1)*10
}
}).then((res:any|undefined)=>{
if(res==undefined){
return
}
users.data=res.data
})
}
return{
users,
total,
content,
getResults,
changePage
}
},
methods:{
toUserDetail(e:number){
this.$router.push({
path:"/home/manngerUser/searchUser/userDetail/"+e
})
}
}
})
</script>
子组件:
<template>
<div class="mt-4">
<el-input
v-model="content"
style="max-width: 600px"
placeholder="请输入用户信息"
class="input-with-select"
>
<template #prepend>
<el-select v-model="select" placeholder="账号" style="width: 115px">
<el-option :disabled="noSelect==1" label="账号" value="1" />
<el-option :disabled="noSelect==2" label="姓名" value="2" />
</el-select>
</template>
<template #append>
<el-button @click="search" icon="Search" />
</template>
</el-input>
</div>
</template>
<script lang="ts">
import { defineComponent,reactive, ref, toRaw,watch } from 'vue'
import API from '@/untils/axios'
import { ElMessage } from 'element-plus'
export default defineComponent({
props:['noSelect','modelValue'],
emits:["returnResults","update:modelValue"],
name:"searchComponent",
setup(props,emits){
var content=ref(props.modelValue)
watch([content],(newValue)=>{
emits.emit("update:modelValue",newValue[0])
},{
deep:true
})
var select=ref("1")
var users=reactive({//返回的前十位用户信息
data:[]
})
var total=ref(0)
return{
select,
users,
total,//总的记录数
content
}
},
methods:{
search(){
if(this.content==""){
ElMessage({
message:"搜索值为空",
type:"warning"
})
return
}
API.get("admin/searchUsers",{
params:{
type:this.select,
content:this.content
}
}).then((res:any)=>{
if(res==undefined){
return
}
if(res.data.users.length==0){
ElMessage({
message:"搜索为空",
})
} else {
ElMessage({
message:"搜索成功",
type:"success"
})
}
this.users.data=res.data.users
this.total=res.data.total
var result={
users:toRaw(this.users.data),//搜索出来的前10位信息
total:this.total,
content:this.content
}
this.$emit("returnResults",result)
})
}
}
})
</script>
上述案例中,父组件使用了v-model,但未指定子组件需绑定的值,因此会默认绑定modeValue,子组件在监视该值时,使用"update:modeValue"进行自动更新。通过上述方法便可实现父子组件间的双向绑定了。
总结
一般来说,要想实现父子组件间的双向绑定,就是父组件向子组件通信,子组件向父组件通信的一个过程。而v-model就是简化了这一双向过程。感谢观看!