Vue 子組件更新props中的屬性值問題

更新時(shí)間：2022年10月18日 12:24:49 作者：qq_41783100

這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue子組件更新props的屬性值

在子組件中更新props中的屬性值，并且更新到父組件，有兩種實(shí)現(xiàn)方式：.sync 和自定義v-model

.sync屬性

父組件在給子組件傳值時(shí)，屬性名后需要加修飾符.sync，格式 :子組件props屬性名.sync

父組件

<template>
<div id="app">
? ? // 注意點(diǎn)一、:show后跟修飾符.sync
? ? // 等同于<my-componen :show="valueChild" @update:show="val => valueChild= val" />
? ? <my-component :show.sync='valueChild' />
</div>
</template>
<script>
export default {
? ? data(): {
? ? ? ? return {valueChild: false}
? ? }
}
</script>

子組件

<template>
? ? <h3>{{show}}</h3>
? ? <button @click="eventOpt">子組件事件</button>
</template>
<script>
export default {
? ?props: {
? ? ? ?show: { type: Boolean, default: false}
? ? } ,
? ? methods: {
? ? ? ? eventOpt() {
? ? ? ? ? ? // 注意二、事件名必須為update:屬性名
? ? ? ? ? ? // 更改prop中的屬性show的屬性值，同時(shí)更新父組件中中valueChild的屬性值
? ? ? ? ? ? ?this.$emit('update:show', false);
? ? ? ? }
? ? }
}
</script>

v-model應(yīng)用

子組件定義的屬性名必須為 value

父組件向上彈射事件給子組件時(shí)，事件名必須為 input

父組件

<template>
<div id="app">
? ?// 等同于<my-componen :value="valueChild" @input="val => valueChild= val" />
? ? <my-component :value='valueChild' />
</div>
</template>
<script>
export default {
? ? data(): {
? ? ? ? return {valueChild: false}
? ? }
}
</script>

子組件

<template>
? ? <h3>{{show}}</h3>
? ? <button @click="eventOpt">子組件事件</button>
</template>
<script>
export default {
? ?props: {
? ? ?// 注意點(diǎn)一、屬性名必須為value
? ? ? value: { type: Boolean, default: false}
? ? } ,
? ? methods: {
? ? ? ? eventOpt() {
? ? ? ? ? ? // 注意二、事件名必須為input
? ? ? ? ? ? // 更改prop中的屬性show的屬性值，同時(shí)更新父組件中中valueChild的屬性值
? ? ? ? ? ? ?this.$emit('input', false);
? ? ? ? }
? ? }
}
</script>

比較

v-model 子組件只能更改props中的一個(gè)屬性值value；

.sync 子組件可以更改props中的多個(gè)屬性值；

Vue子組件中修改Props的幾種情況

首先列舉平常使用Vue 父組件傳遞數(shù)據(jù)到子組件的幾種情況

傳遞的是基礎(chǔ)數(shù)據(jù)類型(Number,Boolean,String)
傳遞的是引用類型（Object,Array）

針對以上幾種情況再逐一進(jìn)行分析

1.首先定義一個(gè)子組件ChildComponent

<template>
? ? <div>
? ? ? ? 我是子組件
? ? ? ? <input v-if="usePrimary" v-model="primaryType"/>
? ? ? ? <input v-else v-model="objectType.value"/>
? ? </div>
</template>

props:{
? ? ? ? primaryType:{
? ? ? ? ? ? type:String,
? ? ? ? ? ? default:''
? ? ? ? },
? ? ? ? usePrimary:{
? ? ? ? ? ? type:Boolean,
? ? ? ? ? ? default:true
? ? ? ? },
? ? ? ? objectType:{
? ? ? ? ? ? type:Object
? ? ? ? }
? ? }

2.然后在父組件中賦值

<child-component?
? ? class="child-component"
? ? :primaryType="primaryType"
? ? :object-type="objectType"
? ? :use-primary="usePrimary"
></child-component>

data(){
? ?return{
? ? ? ? primaryType:'我是基礎(chǔ)數(shù)據(jù)類型',
? ? ? ? objectType:{value:'我是引用類型'},
? ? ? ? usePrimary:false
? ? }
?}

變量 usePrimary 用于控制子組件 input 的v-model引用的類型當(dāng)值為true 時(shí)表示v-model的類型為基礎(chǔ)數(shù)據(jù)類型，當(dāng)值為false 時(shí)表示v-model是引用類型即（Object,Array）

結(jié)果展示

當(dāng)prop的類型為基礎(chǔ)數(shù)據(jù)類型時(shí)（usePrimary 為 true）

控制臺(tái)會(huì)報(bào)錯(cuò)！！

當(dāng)prop的類型為引用類型時(shí)(usePrimary 為 false)

控制臺(tái)沒有任何錯(cuò)誤信息?。?！

結(jié)論

當(dāng)傳給子組件的Prop為基本數(shù)據(jù)類型是（Number,String）在子組件中修改Prop控制臺(tái)會(huì)報(bào)錯(cuò) prop的值不會(huì)改變
當(dāng)傳給子組件的Prop為引用時(shí)（Object，Array）在子組件中修改Prop的屬性不會(huì)報(bào)錯(cuò)且值可以改變

當(dāng)然不建議在子組件中直接修改Prop的值，因?yàn)檫@樣會(huì)破壞單一數(shù)據(jù)流，可能會(huì)導(dǎo)致數(shù)據(jù)的變化無法追蹤。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: