Vue 子組件更新props中的屬性值問題
更新時間：2022年10月18日 12:24:49 作者：qq_41783100
這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue子組件更新props的屬性值
在子組件中更新props中的屬性值，并且更新到父組件，有兩種實現(xiàn)方式：.sync 和 自定義v-model
.sync屬性
父組件在給子組件傳值時，屬性名后需要加修飾符.sync，格式 :子組件props屬性名.sync
父組件
<template>
<div id="app">
? ? // 注意點一、: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的屬性值，同時更新父組件中中valueChild的屬性值
? ? ? ? ? ? ?this.$emit('update:show', false);
? ? ? ? }
? ? }
}
</script>v-model應用
子組件定義的屬性名必須為 value
父組件向上彈射事件給子組件時，事件名必須為 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: {
? ? ?// 注意點一、屬性名必須為value
? ? ? value: { type: Boolean, default: false}
? ? } ,
? ? methods: {
? ? ? ? eventOpt() {
? ? ? ? ? ? // 注意二、事件名必須為input
? ? ? ? ? ? // 更改prop中的屬性show的屬性值，同時更新父組件中中valueChild的屬性值
? ? ? ? ? ? ?this.$emit('input', false);
? ? ? ? }
? ? }
}
</script>比較
v-model 子組件只能更改props中的一個屬性值value；
.sync 子組件可以更改props中的多個屬性值；
Vue子組件中修改Props的幾種情況
首先列舉平常使用Vue 父組件傳遞數(shù)據(jù)到子組件的幾種情況
- 傳遞的是基礎數(shù)據(jù)類型(Number,Boolean,String)
- 傳遞的是引用類型（Object,Array）
針對以上幾種情況再逐一進行分析
1.首先定義一個子組件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:'我是基礎數(shù)據(jù)類型',
? ? ? ? objectType:{value:'我是引用類型'},
? ? ? ? usePrimary:false
? ? }
?}變量 usePrimary 用于控制子組件 input 的v-model引用的類型 當值為true 時表示v-model的類型為 基礎數(shù)據(jù)類型，當值為false 時表示v-model是引用類型即（Object,Array）
結果展示
當prop的類型為基礎數(shù)據(jù)類型時（usePrimary 為 true）
控制臺會報錯??！
當prop的類型為引用類型時(usePrimary 為 false)
控制臺沒有任何錯誤信息?。?！
結論
- 當傳給子組件的Prop為基本數(shù)據(jù)類型是（Number,String）在子組件中修改Prop控制臺會報錯 prop的值不會改變
- 當傳給子組件的Prop為引用時（Object，Array）在子組件中修改Prop的屬性不會報錯且值可以改變
當然不建議在子組件中直接修改Prop的值，因為這樣會破壞單一數(shù)據(jù)流，可能會導致數(shù)據(jù)的變化無法追蹤。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Socket.io將Websocket和輪詢機制以及其它的實時通信方式封裝成了通用的接口,并且在服務端實現(xiàn)了這些實時機制的相應代碼,下面這篇文章主要給大家介紹了關于vue3使用socket.io踩坑的相關資料,需要的朋友可以參考下2023-03-03
本篇內容給大家詳細分析了關于vue數(shù)據(jù)控制視圖的源碼以及重點做了注釋，有興趣的朋友參考學習下。2018-03-03
本文主要介紹了vue-electron中修改表格內容并修改樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue如何監(jiān)聽某個元素的大小變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術之一,雖然Vue.js的一些基礎概念和語法比較易學,但深入挖掘Vue.js的核心概念和功能需要更多的實踐,下面這篇文章主要給大家介紹了關于Vue3封裝組件(帶回調事件)的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了關于如何通過一篇文章帶你吃透Vue生命周期，文章通過結合案例更加的通俗易懂,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue中axios的使用與封裝，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06