常用控件的实现–vue3的新特性
实现各个控件的时候利用Vue3的一些新特性。
- 属性和事件继承
和Vue2相比Vue3默认为子组件继承了属性和事件 ,你可以选择关闭它,而且props所声明的属性也不再帮你继承:
// 子组件
inheritAttr=false
-
v-model
Vue3摒弃了
.sycn
修饰符,如果符合要求就使用v-model
,否则就手动通信吧。v-model:
// 父 <Component v-model:value="xxx"/> // 子 this.emit('update:xxx',yyy)
手动:
// 父 <Component :value="xxx" v-on:update:xxx="(yyy)=>xxx=yyy" /> // 子 this.emit('update:xxx',yyy)
-
新的模板语法–class的绑定
绑定对象
<div :class="{ active: isActive }"></div>
上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。
-
Teleport
Dialog对话框组件当被打开是应该覆盖整个页面,使用Teleport
脱离当前的层叠上下文娶你想去的地方。
&l