关于element-plus(vue3)和element-ui(vue2)两个ui框架的不同和使用区别(持续更新)

element-ui
关于prop使用多的场景 分别是在el-from 和el-tabel
在el-from中的prop属性传值是用于表单校验
在el-tabel中的pros是渲染data中的key值

在elemen-plus中el-dialog与elenent-ui有何不同
在element-ui中的dialog有 :visible.sync属性 可进行父子组件之间的双向绑定(vue2写法)
具体的写法为:
子组件写法

<el-dialog
:visible.sync="isShow">

</el-dialog>

需要在computed中进行告知操作

computed: {
    isShow: {
      get () {
        return this.visible;
      },
      set (val) {
        this.$emit('update:visible', val);
      }
    }
}

在props传值的时候

 props:{
    //控制弹窗的展示喝隐藏
    visible:{
      type:Boolean,
      default:false
    }
 }

以上是vue2中的写法 vue3中 的写法为

<el-dialog 
:model-value="visible"
:before-close="handleClose">//要用:model-value不用v-model v-model报错有坑

</el-dialog>

在props接受父组件传来的值

  props: {
    visible: {
      type: Boolean,
      default: false
    }
 }

在setup中

setup(props,context){
	const methods = {
		handleClose(){
			context.emit('update:visible', false)
		}
	}
}
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值