本篇文章给大家带来了关于vue的相关知识,其中主要介绍了关于vue3基于element-plus的组件二次封装数据双向绑定的相关内容,在实际开发中,经常需要基于element-plus封装一些自己的定制化组件,方便快速构建我们当前的业务,下面一起来看一下,希望对大家有帮助。

【相关推荐:javascript视频教程、vue.js教程】

基于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" width="65%" :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声明

【相关推荐:javascript视频教程、vue.js教程】

以上就是实例详解vue基于element-plus的组件二次封装的详细内容,更多请关注动说科技其它相关文章!

声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Vue
  • 推荐:PHP从基础到实战教程视频

    • 上一篇:深析Vue router-link组件实现路由导航
    • 下一篇:详解Vue项目如何创建路由页面

    相关文章

    相关视频


    • vue Router路由流程简单梳理(使用步骤)
    • 实例详解Vue中的事件修饰符
    • vue组件各个生命周期的职责一览!
    • 详解Vue条件渲染指令:v-if 和 v-show
    • 一文详解vue路由跳转-参数传递与接收
    • 实例详解vue基于element-plus的组件二...
    • javascript的运算符
    • javascript的函数
    • javascript的BOM操作
    • javascript的定时器

    专题推荐

    • 独孤九贱-php全栈开发教程

      全栈 170W+

      主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门

    • 玉女心经-web前端开发教程

      入门 80W+

      主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门

    • 天龙八部-实战开发教程

      实战 120W+

      主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习

    • Laravel 9 学习正当时—保姆级教程,想学不会都难!

      实战 21317次学习

      主讲:博愿 全栈工程师,拼命探索,不计后果

    • 千万级数据并发解决方案(理论+实战)

      实战 55750次学习

      主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习

    • 共22门课程,总价3725元,开通VIP会员免费学

      实战 55750次学习

      主讲:Peter-Zhu、西门大官人、灭绝师太、欧阳克

    作者信息

    长期闲置

    长风破浪会有时,直挂云帆济沧海。

    最近文章
    实例详解vue基于element-plus的组件二次封装899
    vue引入Element-plus的全局引入与局部引入(附代码)571
    详细介绍ElementUI组件库333
    ❤️‍🔥IPIDEA 爬虫采集无IP封禁 无限并发1679
    讲师入驻(把你的才变成财)
    IPIDEA,高度匿名的真实住宅代理,爬虫采集无IP封禁,千万IP资源,无限并发,领取2G流量,住宅IP免费用
    ❤️‍🔥IPIDEA,高度匿名的真实住宅代理,爬虫采集无IP封禁,千万IP资源,无限并发,领取2G流量,住宅IP免费用
    • 最新文章
    • 热门排行

    • ❤️‍🔥共22门课程,总价3725元,开通VIP会员免费学习
    • 一文掌握vue-router的安装与使用
    • 深入探讨Vue中数据双向绑定的原理及实现
    • 实例详解Vue中v-model指令的用法
    • 详解Vue项目如何创建路由页面
    • 实例详解vue基于element-plus的组件二次封装
    • 深析Vue router-link组件实现路由导航
    • 详解Vue渲染列表指令:v-for
    • vue引入Element-plus的全局引入与局部引入(附代码)

    • 共22门课程,总价3725元,开通VIP会员免费学习!
    • vue3.0和vue2.0的区别是什么?
    • .vue 是什么
    • vue子组件怎么向父组件传值
    • vue父组件怎么调用子组件的方法
    • vue子组件怎么调用父组件的方法
    • vue-cli-service不是内部或外部命令怎么解决
    • vue中elementUI是什么
    • vue常用指令有哪些
    视频教程分类
    • php视频教程
    • html视频教程
    • css视频教程
    • JS视频教程
    • jQuery视频教程
    • mysql视频教程
    • Linux视频教程
    • Python视频教程

    Comment list 共有 0 条评论

    暂无评论

    微信小程序

    微信扫一扫体验

    立即
    投稿

    微信公众账号

    微信扫一扫加关注

    发表
    评论
    返回
    顶部