vue3新特性

--

teleport可以指定元素渲染到某一元素下；

如：

<teleport to="body">
  <div>父级teleportdiv>
teleport>

emits自定义事件

emits: ['inFocus', 'submit'] // 会覆盖原生事件
emits: {
    // 没有验证
    click: null,

    // 验证 submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  }

v-module可以绑定多个值

name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
>

自定义v-model修饰符：

  
  {{ myText }}

app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  },
  template: `<input
    type="text"
    :value="modelValue"
    @input="emitValue">`
})

递归组件、组件别名

import { FooBar as FooBarChild } from './components'