vue v-model双向绑定

父组件中

    <layer-import-hand-more v-model="visible"></layer-import-hand-more>
    visible=false

子组件中接受

model: {
      prop: 'visible',
      event: 'change',
},
props: {
      visible: Boolean,
},

这样进行绑定发现了Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.说是不能改变父组件的整体属性的问题。

解决方案

父组件

    <layer-import-hand-more v-model="config"></layer-import-hand-more>
    config:{
        visible:false
    }
 

子组件 

model: {
      prop: 'visible',
      event: 'change',
},
props: {
      visible: Object,
},

这样可以并且不报错，猜测原因是父组件的值作为一个对象传到子组件，其中如果是Boolean类型  则是整个地址被换掉，因为基础类型值是直接指向值的地址，而对象而是先指向对象地址 ，在倒对象中寻找对应的值，这样后者即使里面的值被改了对象也不算被完全改变 还是那个地址。此乃个人理解