如何用手机做钓鱼网站,那个网站可以做雪花特效,装修网站怎么做的,ui设计培训班的学费一般是多少钱创作灵感
面试问道了#xff0c;没答出来#xff0c;呜呜呜~
v-model实现双向绑定的原理
首先我们要知道#xff0c;v-model实现的双向绑定其实只是props与emit的简化版本。其中#xff0c;props负责父组件向子组件传递值#xff0c;emit负责子组件向父组件传递值。
在…创作灵感
面试问道了没答出来呜呜呜~
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的一个具体使用
父组件
templatedivsearchComponent classsearchComponent v-modelcontent returnResultsgetResults/el-divider /div classshow el-empty v-ifusers.data.length0 description空空如也~ /div classeveryOne v-else v-foritem in users.data :keyitemel-avatar classeveryOne-avatar shapesquare :srcitem.avatar_url /div classeveryOne-textel-text line-clamp1 classeveryOne-name sizesmall姓名:{{ item.name }}/el-textel-text line-clamp1 classeveryOne-account sizesmall学号:{{ item.account }}/el-textel-text line-clamp1 classeveryOne-email sizesmall邮箱:{{ item.email }}/el-text/divdiv classeveryOne-tagel-tag classeveryOne-sex :typeitem.sexmale?primary:item.sexfemale?danger:info{{ item.sexmale?男:item.sexfemale?女:保密 }}/el-tagel-tag classeveryOne-isIdentification :typeitem.isIdentification0?info:primary{{ item.isIdentification0?未认证:已认证 }}/el-tagel-tag classeveryOne-type :typeitem.typestudent?primary:success{{ item.typestudent?学生:教师 }}/el-tag/divbutton classeveryOne-detail clicktoUserDetail(item.id)详情/button/div/divel-pagination v-iftotal!0 classpagination current-changechangePage background layoutprev, pager, next :totaltotal //div
/templatescript langts
import { defineComponent, reactive, ref } from vue
import API from /untils/axios
import searchComponent from /components/searchComponent.vueexport default defineComponent({components:{searchComponent},setup(){var users:anyreactive({data:[]})var totalref(0)var contentref(2)function getResults(e:any){users.datae.userstotal.valuee.totalcontent.valuee.content}function changePage(e:any){//改变当前页API.get(admin/changeUserPages,{params:{content:content.value,start:(e-1)*10}}).then((res:any|undefined){if(resundefined){return}users.datares.data})}return{users,total,content,getResults,changePage}},methods:{toUserDetail(e:number){this.$router.push({path:/home/manngerUser/searchUser/userDetail/e})}}
})
/script
子组件
templatediv classmt-4el-inputv-modelcontentstylemax-width: 600pxplaceholder请输入用户信息classinput-with-selecttemplate #prependel-select v-modelselect placeholder账号 stylewidth: 115pxel-option :disablednoSelect1 label账号 value1 /el-option :disablednoSelect2 label姓名 value2 //el-select/templatetemplate #appendel-button clicksearch iconSearch //template/el-input/div
/templatescript langts
import { defineComponent,reactive, ref, toRaw,watch } from vue
import API from /untils/axios
import { ElMessage } from element-plusexport default defineComponent({props:[noSelect,modelValue],emits:[returnResults,update:modelValue],name:searchComponent,setup(props,emits){var contentref(props.modelValue)watch([content],(newValue){emits.emit(update:modelValue,newValue[0])},{deep:true})var selectref(1)var usersreactive({//返回的前十位用户信息data:[]})var totalref(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(resundefined){return}if(res.data.users.length0){ElMessage({message:搜索为空,})} else {ElMessage({message:搜索成功,type:success})}this.users.datares.data.usersthis.totalres.data.totalvar 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就是简化了这一双向过程。感谢观看
