一、vue3.3 新特性defineOptions

在Vue3.3之前，組件的默認組件名為.vue單文件組件文件的名字，假如我們想修改組件名，則需要結合Options API進行修改。defineOptions的出現解決了這個問題。

這個宏可以用來直接在?<script setup>?中聲明組件選項，而不必使用單獨的?<script>?塊：?

<script setup lang="ts">
defineOptions({
  name: '組件名稱'
  inheritAttrs: false, // 組件標簽上的屬性是否透傳
  customOptions: {
    /* 其他配置 */
  }
})
</script>

二、vue3.4?新特性defineModel

這個宏可以用來聲明一個雙向綁定 prop，通過父組件的?v-model?來使用。組件 v-model指南中也討論了示例用法。

在底層，這個宏聲明了一個 model prop 和一個相應的值更新事件。如果第一個參數是一個字符串字面量，它將被用作 prop 名稱；否則，prop 名稱將默認為?"modelValue"。在這兩種情況下，你都可以再傳遞一個額外的對象，它可以包含 prop 的選項和 model ref 的值轉換選項

1、簡介

defineModel()?返回的值是一個 ref。它可以像其他 ref 一樣被訪問以及修改，不過它能起到在父組件和當前變量之間的雙向綁定的作用：

• 它的?value?和父組件的?v-model?的值同步；
• 當它被子組件變更了，會觸發父組件綁定的值一起更新。

2、底層機制

defineModel?是一個便利宏。 編譯器將其展開為以下內容：

• 一個名為?modelValue?的 prop，本地 ref 的值與其同步；
• 一個名為?update:modelValue?的事件，當本地 ref 的值發生變更時觸發。

3、默認v-model

父組件Parent.vue

<template>
  <Child v-model="value"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
const value = ref("");
</script>

子組件Child.vue

? ?1、vue3.4前用法

<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>
<script setup lang="ts">
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>

? ?2、vue3.4用法?

<!-- vue3.4用法 -->
<template>
  <input type="text" v-model="model" />
</template>
<script setup lang="ts">
// model變量名稱可隨意取
const model = defineModel();
</script>

4、帶參數的v-model

父組件Parent.vue

<template>
  <Child v-model:date="dateValue"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
const dateValue = ref("");
</script>

子組件Child.vue

1、vue3.4前用法

<template>
  <input
    type="text"
    :value="date"
    @input="emit('update:date', $event.target.value)"
  />
</template>
<script setup lang="ts">
const props = defineProps(["date"]);
const emit = defineEmits(["update:date"]);
</script>

2、vue3.4用法?

<template>
  <input type="text" v-model="date" />
</template>
<script setup lang="ts">
const name = defineModel("date");
</script>

5、同時綁定多個v-model

父組件Parent.vue

<template>
  <Child v-model:date="dateValue" v-model:address="dateTimeValue"></Child>
</template>
<script setup lang="ts">
import { ref } from "vue";
const dateValue = ref("");
const dateTimeValue = ref("");
</script>

子組件Child.vue

1、vue3.4前用法

<template>
  <input
    type="text"
    :value="date"
    @input="$emit('update:date', $event.target.value)"
  />
  <input
    type="text"
    :value="dateTime"
    @input="$emit('update:dateTime', $event.target.value)"
  />
</template>
<script setup lang="ts">
defineProps(["date", "dateTime"]);
defineEmits(["update:date", "update:dateTime"]);
</script>

2、vue3.4用法?

<template>
  <input type="text" v-model="dateValue" />
  <input type="text" v-model="dateTime" />
</template>
<script setup lang="ts">
const dateValue = defineModel("date");
const dateTimeValue = defineModel("dateTime");
</script>