Vue3 其他变更

v-model

在 Vue2 中 v-mode 指令语法糖简写的代码。

<Son :value="msg" @input="msg=$event" />

在 Vue3 中 v-model 语法糖有所调整。

<Son :modelValue="msg" @update:modelValue="msg=$event" />

<template>
  <h2>count: {{ count }}</h2>
  <hr />
  <Son :modelValue="count" @update:modelValue="count = $event" />
  <!-- <Son v-model="count" /> -->
</template>
<script>
  import { ref } from 'vue'
  import Son from './Son.vue'
  export default {
    name: 'App',
    components: {
      Son
    },
    setup() {
      const count = ref(10)
      return { count }
    }
  }
</script>

<template>
  <h2>子组件 {{ modelValue }}</h2>
  <button @click="$emit('update:modelValue', 100)">改变 count</button>
</template>
<script>
  export default {
    name: 'Son',
    props: {
      modelValue: {
        type: Number,
        default: 0
      }
    }
  }
</script>

ref 属性

内容

获取单个 DOM。

<template>
  <!-- #3 -->
  <div ref="dom">我是box</div>
</template>
<script>
  import { onMounted, ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      // #1
      const dom = ref(null)
      onMounted(() => {
        // #4
        console.log(dom.value)
      })
      // #2
      return { dom }
    }
  }
</script>

获取组件实例。

<template>
  <!-- #4 -->
  <button @click="changeName">修改子组件的 Name</button>
  <hr />
  <!-- #3 -->
  <Test ref="test" />
</template>
<script>
  import { ref } from 'vue'
  import Test from './Test.vue'
  export default {
    name: 'App',
    components: {
      Test
    },
    setup() {
      // #1
      const test = ref(null)
      const changeName = () => {
        test.value.changeName('elser')
      }
      // #2
      return { test, changeName }
    }
  }
</script>

<template>
  <div>
    <p>{{ o.name }}</p>
  </div>
</template>

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const o = reactive({ name: 'ifer' })

      const changeName = (name) => {
        o.name = name
      }
      return {
        o,
        changeName
      }
    }
  }
</script>

Teleport

作用

传送，能将特定的 HTML 结构（一般是嵌套很深的）移动到指定的位置，解决 HTML 结构嵌套过深造成的样式影响或不好控制的问题。

<template>
  <div class="child">
    <teleport to="body">
      <dialog v-if="bBar" />
    </teleport>
    <button @click="handleDialog">显示弹框</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  import Dialog from './Dialog.vue'
  export default {
    name: 'Child',
    components: {
      Dialog
    },
    setup() {
      const bBar = ref(false)
      const handleDialog = () => {
        bBar.value = !bBar.value
      }
      return {
        bBar,
        handleDialog
      }
    }
  }
</script>