快捷導(dǎo)航

淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定

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

這篇文章主要介紹了淺析Vue3中通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡(jiǎn)化父子組件雙向綁定,需要的朋友可以參考下

一、vue2 中 sync 修飾符的功能在 vue3 中如何呈現(xiàn)？

1、sync 修飾符回顧

1、vue 規(guī)則：props 是單向向下綁定的，子組件不能修改 props 接收過來的外部數(shù)據(jù)。

2、如果在子組件中修改 props ，Vue會(huì)向你發(fā)出一個(gè)警告。（無法通過修改子組件的props來更改父組件。）而若需要在子組件更新數(shù)據(jù)時(shí)通知父組件同步更新，需要結(jié)合 $emit 和 v-on 實(shí)現(xiàn)。

3、而sync修飾符的作用則是簡(jiǎn)化事件聲明及監(jiān)聽的寫法。

　　如下例子，比較sync和正常修改數(shù)據(jù)通知外層的寫法：可以看到 sync 修飾符確實(shí)簡(jiǎn)便了許多。

// 父組件
<template>
    <div> 數(shù)量： {{num}}</div>
    <!-- <ChildComponent :num="num" @increase="num = $event"/> -->
    <ChildComponent :num.sync="num" />
</template>

//子組件
<template>
    <div @click="addNum"> 接收數(shù)量： {{num}}</div>
</template>
<script>
export default {
    props: ['num'],
    // data() {
    //    return {
    //        childNum: this.num
    //    }
    // },
    methods: {
        addNum() {
            // this. childNum++
            // this.$emit('increase', this. childNum)
            this.$emit('update:num', this.num + 1)
        }
    }
}

2、sync 的語法糖功能在vue3中如何編寫使用？

　　vue3 中，通過 v-model:propName 實(shí)現(xiàn)自定義組件間數(shù)據(jù)的雙向綁定。使用方法：

（1）父組件通過 “v-model:綁定的屬性名” 傳遞數(shù)據(jù)屬性，支持綁定多個(gè)屬性；

（2）子組件配置emits，通過 “update:屬性名” 的格式定義更新事件

二、如何通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定

　　Vue3父子組件雙向數(shù)據(jù)綁定寫法做了些許改變，同時(shí)也支持多個(gè)數(shù)據(jù)雙向綁定

1、單個(gè)數(shù)據(jù)雙向綁定

// 父組件
// 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)雙向綁定。

<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>

2、多個(gè)數(shù)據(jù)雙向綁定 - 與單數(shù)據(jù)綁定差別不大

// 父組件
<ChildComp v-model="search" v-model:address="addr" />

// 子組件對(duì)應(yīng)為
props: {
　　modelValue: { // 父組件 v-model 沒有指定參數(shù)名，則默認(rèn)是 modelValue
　　　　type: String,
　　　　default: ''
　　},
　　address: {  // 父組件 v-model 有指定參數(shù)名，則是指定參數(shù)名
　　　　type: String,
　　　　default: ''
　　}
},

// input初始化
const sea = ref(props.modelValue)
const add = ref(props.address)
 
// 如果父組件傳過來的數(shù)據(jù)是異步獲取的，需要進(jìn)行監(jiān)聽
watch(() => props.modelValue, () => { sea.value = props.modelValue })
watch(() => props.address, () => { add.value = props.address })
 
// 數(shù)據(jù)雙向綁定
emit('update:modelValue', e)
emit('update:address', e)

3、利用 computed 簡(jiǎn)化父子組件雙向數(shù)據(jù)綁定

　　上面是通過 ref 聲明響應(yīng)式數(shù)據(jù)，其實(shí)可以通過 computed 計(jì)算屬性的 get / set 去簡(jiǎn)化操作。如下：

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
const show = computed({
  get() {
    return props.modelValue
  },
  set(v) {
    emit('update:modelValue', v)
  }
})

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

您可能感興趣的文章: