vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定
更新時(shí)間：2024年01月11日 10:00:02 作者：一天只碼五十行
這篇文章主要個(gè)給大家介紹了在vue3中使用defineModel進(jìn)行父子組件中的雙向綁定,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
在vue3.4版本中，defineModel進(jìn)入穩(wěn)定版。我們可以使用defineModel來優(yōu)化父子組件中的雙向綁定。在3.3之前的版本中，雙向綁定需要在使用props和emits傳值，現(xiàn)在我們只需要一行代碼就可以解決這個(gè)問題：const 變量名=defineModel()
在子組件Helloworld.vue中：
<template>
<div class="page">
<input
type="text"
:value="fonts"
@input="(e:any) => (fonts= e.target.value)"
size="large"
class="inputBox"
/>
</div>
</template>
<script lang="ts" setup>
import { defineModel } from "vue";
const fonts = defineModel();
</script>
<style scoped lang="less">
.page {
width: 600px;
height: 150px;
}
</style>在父組件中：
<template>
<div class="home">
<div class="mian">
<div class="text">{{ fonts }}</div>
<HelloWorld v-model="fonts" />
</div>
</div>
</template>
<script lang="ts" setup>
import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
const fonts = ref<string>("aaa");
</script>
<style>
.home {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>再看看效果
以上就是vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定的詳細(xì)內(nèi)容，更多關(guān)于vue3 defineModel父子組件綁定的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用idea創(chuàng)建vue項(xiàng)目的圖文教程
Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
今天小編就為大家分享一篇實(shí)現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue?filters和directives訪問this的問題詳解
這篇文章主要介紹了vue?filters和directives訪問this的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了Vue3請(qǐng)求攔截器里如何配置token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue.js每天必學(xué)之過渡與動(dòng)畫，對(duì)Vue.js過渡與動(dòng)畫進(jìn)行深入學(xué)習(xí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例
這篇文章主要介紹了vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue3如何通過ESLint校驗(yàn)代碼是否符合規(guī)范詳解
ESLint可以靈活設(shè)置規(guī)則,也發(fā)布了很多公開的規(guī)則集,下面這篇文章主要給大家介紹了關(guān)于Vue3如何通過ESLint校驗(yàn)代碼是否符合規(guī)范的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
關(guān)于Vue-extend和VueComponent問題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue3.0 CLI - 2.6 - 組件的復(fù)用入門教程
這篇文章主要介紹了 vue3.0 CLI - 2.6 - 組件的復(fù)用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09