&_element plus和el">
当前位置:   article > 正文

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

element plus和elementui区别

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>
  • 1
  • 2
  • 3
  • 4

需要在computed中进行告知操作

computed: {
    isShow: {
      get () {
        return this.visible;
      },
      set (val) {
        this.$emit('update:visible', val);
      }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在props传值的时候

 props:{
    //控制弹窗的展示喝隐藏
    visible:{
      type:Boolean,
      default:false
    }
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

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

</el-dialog>
  • 1
  • 2
  • 3
  • 4
  • 5

在props接受父组件传来的值

  props: {
    visible: {
      type: Boolean,
      default: false
    }
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在setup中

setup(props,context){
	const methods = {
		handleClose(){
			context.emit('update:visible', false)
		}
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/225754
推荐阅读
相关标签
  

闽ICP备14008679号