Vue3自制UI框架技术总结_基于vue3自定义模板框架

常用控件的实现–vue3的新特性

实现各个控件的时候利用Vue3的一些新特性。

• 属性和事件继承

和Vue2相比Vue3默认为子组件继承了属性和事件 ，你可以选择关闭它，而且props所声明的属性也不再帮你继承：

// 子组件
inheritAttr=false
1
2

• v-model

  Vue3摒弃了.sycn修饰符,如果符合要求就使用v-model，否则就手动通信吧。

  v-model:

  // 父
  <Component v-model:value="xxx"/>
  // 子
  this.emit('update:xxx',yyy)
  1
  2
  3
  4

  手动：

  // 父
  <Component :value="xxx" v-on:update:xxx="(yyy)=>xxx=yyy"  />
  // 子
  this.emit('update:xxx',yyy)
  1
  2
  3
  4

• 新的模板语法–class的绑定

  绑定对象

  <div :class="{ active: isActive }"></div>
  1

  上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

• Teleport

Dialog对话框组件当被打开是应该覆盖整个页面，使用Teleport脱离当前的层叠上下文娶你想去的地方。

&l