vue3父子組件傳值?雙向綁定及注意問題小結(jié)

更新時(shí)間：2022年12月12日 12:33:14 作者：古蘭精

這篇文章主要介紹了Vue3中如何通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

attribute agruments

vue3父子組件傳值雙向綁定及注意事項(xiàng)

http://www.dhdzp.com/article/269785.htm 可以參考下

首先注意

父子組件傳值是單項(xiàng)數(shù)據(jù)流，vue3中子組件是不能直接修改父組件數(shù)據(jù)的，vue2中是可以直接使用sync的語法，直接進(jìn)行修改的而sync修飾符的作用則是簡化事件聲明及監(jiān)聽的寫法。

注意事項(xiàng)：

// 父組件
// v-model 沒有指定參數(shù)名時(shí)，子組件默認(rèn)參數(shù)名是modelValue
<ChildComp v-model="search" />

（1）子組件也并不是直接拿 props 傳的變量直接用，而是需要聲明一個(gè)響應(yīng)式變量 - 通過 ref(props.modelValue) 聲明基于 props 傳的變量值為初始化值的響應(yīng)式數(shù)據(jù)。

（2）且如果父組件傳的是異步數(shù)據(jù)的話，還需要對(duì)其進(jìn)行監(jiān)聽。

（3）當(dāng)子組件數(shù)據(jù)改變時(shí)需要通過 emit('update:modelValue', e) 去修改父組件數(shù)據(jù)實(shí)現(xiàn)雙向綁定。

舉例子：單個(gè)數(shù)據(jù)綁定

<template>
  <div>
    <input v-model="sea" @input="valChange(sea)" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  name: 'ChildComp',
  props: {
    modelValue: { // 父組件 v-model 沒有指定參數(shù)名，則默認(rèn)是 modelValue
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // input初始化
    const sea = ref(props.modelValue)
    // 如果父組件傳過來的數(shù)據(jù)是異步獲取的，則需要進(jìn)行監(jiān)聽
    watch(() => props.modelValue, () => { sea.value = props.modelValue })
    // 數(shù)據(jù)雙向綁定
    function valChange (e: string) {
      emit('update:modelValue', e)
    }
    return {
      sea,
      valChange
    }
  }
})
</script>

到這就是，在子組件中可以使用你定義ref來使用修改了，可以使用emit的方法回傳數(shù)據(jù)，也可以直接在頁面上直接使用v-model來進(jìn)行雙向數(shù)據(jù)綁定

到此這篇關(guān)于Vue3中如何通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定的文章就介紹到這了,更多相關(guān)Vue3父子組件的雙向數(shù)據(jù)綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)
這篇文章主要介紹了vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中自定義右鍵菜單插件
這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue-router的HTML5 History 模式設(shè)置
這篇文章主要介紹了vue-router的HTML5 History模式設(shè)置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
iphone劉海屏頁面適配方法
這篇文章主要介紹了iphone劉海屏頁面適配方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue開發(fā)利器之unplugin-auto-import的使用
unplugin-auto-import 解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動(dòng)導(dǎo)入,也支持自定義插件的自動(dòng)導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)利器之unplugin-auto-import使用的相關(guān)資料,需要的朋友可以參考下
2023-02-02
Vue中 key keep-alive的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue中 key keep-alive的實(shí)現(xiàn)原理,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue+Vant實(shí)現(xiàn)7天日歷展示并在切換日期時(shí)實(shí)時(shí)變換功能
本文介紹了如何利用Vue和Vant框架結(jié)合moment.js插件來實(shí)現(xiàn)一個(gè)7天日歷展示功能,在這個(gè)功能中,用戶可以在切換日期時(shí)看到界面的實(shí)時(shí)變化,此外,文章還提供了代碼實(shí)現(xiàn)和效果測試的詳細(xì)步驟,幫助開發(fā)者能夠順利完成類似的項(xiàng)目開發(fā)
2024-10-10
Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下
2025-03-03