Vue3-新特性defineOptions和defineModel示例詳解
defineOptions
問題：用了<script setup>后，就無法添加與其平級的屬性了，比如定義組件的name或其他自定義的屬性。
為了解決這一問題，引入了defineProps與defineEmits這兩個宏，但這只解決了props與emits這兩個屬性。如果要定義其他的平級屬性，還是得回到最原始的用法--就再添加一個普通的<script>標簽。這樣就會存在兩個<script>標簽，讓人無法接受。
所以在Vue3.3中新引入了defineOptions宏。顧名思義，主要是用來定義Option API的選項?？梢杂胐efineOptions定義任意的選項，props、emits、expose、slots除外（因為這些可以使用defineXXX來做到）
<script setup>
import { defineOptions } from 'vue'
defineOptions({
name: 'Foo',//組件重命名
inheritAttrs: false,
//...更多自定義屬性
})
</script>defineModel
實驗型，快速實現(xiàn)雙向綁定，簡化v-model
在Vue3中，自定義組件上使用v-model，相當于傳遞一個modelValue屬性，同時觸發(fā)update:modelValue事件
<Child v-model="isVisible"> //相當于 <Child :modelValue="isVisible" @update:modelValue="isVisible=$event">
我們需要先定義props，再定義emits。其中有許多重復的代碼。如果需要修改此值，還需要手動調動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改進后的子組件：
<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>因為這是實驗型，所以還需要配置一些東西才能生效
打開vite.config.js文件加入以下語句：
{
script: {
defineModel: true
}
}
寫完后，需要重新啟動這個項目才能生效
到此這篇關于Vue3-新特性defineOptions和defineModel的文章就介紹到這了,更多相關Vue3 defineOptions和defineModel內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Nginx(engine x)是一個高性能的HTTP和反向代理web服務器,是部署前端項目的首選,這篇文章主要給大家介紹了關于Vue項目前端部署(nginx方式)的相關資料,需要的朋友可以參考下2023-09-09
關于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
這篇文章主要介紹了關于vue-socket.io使用及版本原因消息無法監(jiān)聽bug，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了解決如何el-date-picker 寬度溢出瀏覽器問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了vue頁面使用多個定時器的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了vue.js中v-for使用及索引獲取,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue2.0基于vue-cli+webpack Vuex的用法(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack Vuex的用法(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue+element?upload上傳帶參數(shù)的實例
這篇文章主要介紹了vue+element?upload上傳帶參數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3如何實現(xiàn)變量雙向綁定問題,具有很好的參考價值,希望對大家有所幫助,2023-11-11
使用vue+element?ui實現(xiàn)走馬燈切換預覽表格數(shù)據(jù)
這次做項目的時候遇到需要切換預覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關于使用vue+element?ui實現(xiàn)走馬燈切換預覽表格數(shù)據(jù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本文主要介紹了vue項目npm install失敗的問題解決方案,文中通過圖文示例介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01