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'])
其他组件的调用
说明
利用computed的set，get方法，你可以进行父子组件的双向绑定，再也不用担心，子组件无法修改父组件的props而烦恼，其他的element的组件，大致实现思路都是如此。
基础的dialog弹框
el-dialog子组件的封装 baseDialog.vue
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)
}
})
其他组件的调用
对应的插槽内容
注意事项
v-model双向绑定默认的props名称为value，像dialog这种绑定的是isShow，需要在v-model后面声明双向绑定的props参数名称v-model:isShow，像input，select这种输入框绑定默认为value，所以可以忽略不写。若你绑定其他值（即除了value以外的其他参数值），则需要v-model:isShow声明
读到这里，这篇“vue基于element-plus的组件二次封装怎么实现”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
分享文章：vue基于element-plus的组件二次封装怎么实现
转载源于：http://bjjierui.cn/article/pdcios.html
