vueelement-plus的组件二次封装
基于element-plus的二次封装数据双向绑定
在实际开发中,经常需要基于element-plus封装一些自己的定制化组件,方便快速构建我们当前的业务。在vue2.0中父子组件数据的双向绑定通常都是通过在props中传值:value.sync,在子组件中使用,this.$emit(“update:value”, value)的方式,那么我们怎样在vue3中实现类似的父子组件的双向绑定呢?
在vue2中,数据的响应式是基于Object.defineProperty对象进行数据的双向绑定,这种劫持 发布订阅的模式并不能很好的检测对象、数组等复杂类型的数据。在vue3的数据的响应式是基于proxy的set、get方法,相对于Object.defineProperty的劫持,proxy代理的方式更为优雅。
具体实现思路如下:
表单的label和对应的选择器、输入框
效果预览
el-input子组件的封装 baseInput.vue
<template>
<div class="base-input flex align-center">
<div v-if="props.blockName">{{ props.blockName }}</div>
<el-input placeholder="请输入" v-model="chanValue"></el-input>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
blockName: {
type: String,
default: ''
},
value: {
type: String,
default: ''
}
})
const emits = defineEmits(['update:value'])
// 通过重写计算属性的set和get方法,将计算属性的结果绑定在输入框的model中
const chanValue = computed({
get: () => props.value,
set: (val) => {
emits('update:value', val)
}
})
</script>
el-select子组件的封装 baseSelect.vue
<template>
<div class="base-select flex align-center">
<div>{{ props.blockName }}</div>
<el-select
v-model="chanValue"
:multiple="props.multiple"
:filterable="props.filterable"
:allow-create="props.allowCreate"
:placeholder="placeholder"
>
<el-option v-for="item in props.options" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
blockName: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择'
},
options: {
type: Array,
default() {
return [{ value: '', label: '' }]
}
},
// 一下三个属性配合多选使用
multiple: {
type: Boolean,
default: false
},
filterable: {
type: Boolean,
default: false
},
allowCreate: {
type: Boolean,
default: false
}
})
const chanValue = computed({
get: () => props.value,
set: (val) => {
emits('update:value', val)
}
})
const emits = defineEmits(['update:value'])
</script>
其他组件的调用
<BaseInput blockName="传入的label名称" v-model:value="双向绑定的数据" />
<BaseSelect blockName="传入的label名称" :options="选择器的选项值" v-model:value="双向绑定的数据" />
说明
利用computed的set,get方法,你可以进行父子组件的双向绑定,再也不用担心,子组件无法修改父组件的props而烦恼,其他的element的组件,大致实现思路都是如此。
基础的dialog弹框
el-dialog子组件的封装 baseDialog.vue
<template>
<div>
<el-dialog v-model="getShow" :before-close="handlerCancer">
<div>{{props.title}}</div>
<slot/>
<template #footer>
<span>
<button @click="handlerCancer">取消</button>
<button @click="handlerSubmit">确定</button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
title: {
type: String,
default:''
},
isShow: {
type: Boolean,
default: false
}
})
const emits = defineEmits(['update:isShow'])
const handlerCancer = () => {
emits('update:isShow', false)
}
const handlerSubmit = () => {
// dialog 点击确定按钮之前处理相关业务逻辑
emits('update:isShow', false)
}
const getShow = computed({
get: () => props.isShow,
set: (val) => {
emits('update:isShow', val)
}
})
</script>
其他组件的调用
<BaseDialog title="传入的标题名称" v-model:isShow="isShow">
<div>对应的插槽内容</div>
</BaseDialog>
注意事项
v-model双向绑定默认的props名称为value,像dialog这种绑定的是isShow,需要在v-model后面声明双向绑定的props参数名称v-model:isShow,像input,select这种输入框绑定默认为value,所以可以忽略不写。若你绑定其他值(即除了value以外的其他参数值),则需要v-model:isShow声明
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfghec
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01