Vue在子组件中修改Props的几种情况

首先列举平常使用Vue 父组件传递数据到子组件的几种情况

• 传递的是基础数据类型(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:'我是基础数据类型',
        objectType:{value:'我是引用类型'},
        usePrimary:false
    }
 }

变量 usePrimary 用于控制子组件 input 的v-model引用的类型 当值为true 时表示v-model的类型为 基础数据类型，当值为false 时表示v-model是引用类型即（Object,Array）

结果展示

• 当prop的类型为基础数据类型时（usePrimary 为 true）

控制台会报错！！

• 当prop的类型为引用类型时(usePrimary 为 false)

控制台没有任何错误信息！！！

结论

1. 当传给子组件的Prop为基本数据类型是（Number,String）在子组件中修改Prop控制台会报错 prop的值不会改变
2. 当传给子组件的Prop为引用时（Object，Array）在子组件中修改Prop的属性不会报错且值可以改变

当然不建议在子组件中直接修改Prop的值，因为这样会破坏单一数据流，可能会导致数据的变化无法追踪。