快捷導(dǎo)航

Vue3-新特性defineOptions和defineModel示例詳解

更新時(shí)間：2023年11月24日 16:56:57 作者：小沐°

在Vue3.3中新引入了defineOptions宏主要是用來(lái)定義Option API的選項(xiàng),可以用defineOptions定義任意的選項(xiàng),props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧

defineOptions

問(wèn)題：用了<script setup>后，就無(wú)法添加與其平級(jí)的屬性了，比如定義組件的name或其他自定義的屬性。

為了解決這一問(wèn)題，引入了defineProps與defineEmits這兩個(gè)宏，但這只解決了props與emits這兩個(gè)屬性。如果要定義其他的平級(jí)屬性，還是得回到最原始的用法--就再添加一個(gè)普通的<script>標(biāo)簽。這樣就會(huì)存在兩個(gè)<script>標(biāo)簽，讓人無(wú)法接受。

所以在Vue3.3中新引入了defineOptions宏。顧名思義，主要是用來(lái)定義Option API的選項(xiàng)。可以用defineOptions定義任意的選項(xiàng)，props、emits、expose、slots除外（因?yàn)檫@些可以使用defineXXX來(lái)做到）

<script setup>
import { defineOptions } from 'vue'
defineOptions({
  name: 'Foo',//組件重命名
  inheritAttrs: false,
  //...更多自定義屬性
})
</script>

defineModel

實(shí)驗(yàn)型，快速實(shí)現(xiàn)雙向綁定，簡(jiǎn)化v-model

在Vue3中，自定義組件上使用v-model，相當(dāng)于傳遞一個(gè)modelValue屬性，同時(shí)觸發(fā)update:modelValue事件

<Child v-model="isVisible">
//相當(dāng)于
<Child :modelValue="isVisible" @update:modelValue="isVisible=$event">

我們需要先定義props，再定義emits。其中有許多重復(fù)的代碼。如果需要修改此值，還需要手動(dòng)調(diào)動(dòng)emit函數(shù)

父組件：

<template>
  <inputModel v-model="txt"></inputModel>{{ txt }}
</template>
<script setup>
import inputModel from '@/components/inputModel.vue'
import { ref } from 'vue'
const txt = ref(100)
</script>

子組件：

<script setup>
import { defineProps, defineEmits } from 'vue'
defineProps({
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <div>
    <input type="text" :value="modelValue" @input="e => emit('update:modelValue', e.target.value)">
  </div>
</template>
<style scoped>
input {
  width: 14rem;
  height: 2rem;
}
</style>

使用defineModel改進(jìn)后的子組件：

<script setup>
import { defineModel } from 'vue'
const modelValue = defineModel()
</script>
<template>
  <div>
    <input type="text" :value="modelValue" @input="e => modelValue = e.target.value">
  </div>
</template>

因?yàn)檫@是實(shí)驗(yàn)型，所以還需要配置一些東西才能生效

打開(kāi)vite.config.js文件加入以下語(yǔ)句：

    {
      script: {
        defineModel: true
      }
    }

寫(xiě)完后，需要重新啟動(dòng)這個(gè)項(xiàng)目才能生效

到此這篇關(guān)于Vue3-新特性defineOptions和defineModel的文章就介紹到這了,更多相關(guān)Vue3 defineOptions和defineModel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: