快捷導(dǎo)航

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)文章

手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進(jìn)行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
Vue CLI是一個(gè)用于快速Vue.js開發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10
vue中關(guān)于_ob_:observer的處理方式
這篇文章主要介紹了vue中關(guān)于_ob_:observer的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐
在開發(fā)Web應(yīng)用程序時(shí)，常常需要進(jìn)行登錄驗(yàn)證和權(quán)限管理，本文主要介紹了vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue實(shí)現(xiàn)todolist刪除功能
這篇文章主要介紹了Vue實(shí)現(xiàn)todolist刪除功能,，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
Vue兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法
這篇文章主要介紹了Vue兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個(gè)vue實(shí)例從創(chuàng)建到銷毀的過程，就是這個(gè)vue實(shí)例的生命周期,在這個(gè)過程中，他經(jīng)歷了從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,那么這些過程中，具體vue做了些啥，我們今天來了解一下
2023-05-05
v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下
2024-02-02
vue中mint-ui的使用方法
這篇文章主要為大家詳細(xì)介紹了vue中mint-ui的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小的原理
這篇文章主要介紹了vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-09-09