vue2 和 vue3的区别

  • vue3 的 template 支持多个跟标签，vue2 不支持
  • vue3 有 createApp(组件)，vue2 为 new Vue({template,render})

  • 使用 v-modal 代替之前的 v-modal和.sync

    1. <Switch :value="y" @update:value="y = $event"/>
    2. //可以简化为
    3. <Switch v-model:value="y"/>

  • 新增 context.emit ，与this.$emit作用相同

    1. export default{
    2.   props:{
    3.       value:Boolean,
    4.   },
    5. setup(props,context){
    6.   const fn = ()=>{
    7.     context.emit("update:value",!props.value)  //使用emit传出对父组件value值的修改结果，外部监听到修改后，改变结果，并重新传到子组件
    8.   }
    9. }
    10. }

Vue3 属性绑定

  • 使用 inheritAttrs:false可以取消默认绑定（外部传进的函数等，会默认绑定到组件最外层的元素上）
  • 使用$attrs或者context.attrs获取所有属性
  • 使用v-bind="$attrs"可以批量绑定属性

Vue3 具名插槽

  1. //传送
  2. <template v-slot:title>
  3.   <strong>标题内容</strong>
  4. </template>
  6. //引用 name与上面v-slot后面相对应
  7. <slot name='title'/>

获取插槽中的内容

  1. <temeplate>
  2.   <Tabs>
  3.     <Tab title="导航1">tab1</Tab>
  4.     <Tab title="导航2">tab2</Tab>
  5.   </Tabs>
  6. </temeplate>
  8. //在Tabs组件中获取到包含的内容
  9. const eles = context.slots.default() //数组内含有其内的元素

Teleport 标签

可以将包含的内容挂载到某个html节点下

  1. //将div挂载到 body 下
  2. <Teleport to="body">
  3.   <div>123</div>
  4. </Teleport>