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