关于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)
		}
	}
}

你可能感兴趣的:(笔记,ui,javascript,elementui)