关于vue props的两点思考

224 阅读1分钟

子组件不能改变父组件的props

对于父组件传来的props,当是string,number等类型的时候,如果子组件改变的父组件的props,那么控制台中则会报错。 但是,当传递的props为object时,如果子组件中改变的父组件的值,不会报错。因为并未改变object的指向,所以如果子组件引入父组件的props时,最好深拷贝一份。Object.assign()

如果子组件想改变父组件的props呢?

此时不应该直接引入props,而是使用v-model的方式,然后子组件中$emit 'input'方法。这样就能双向绑定了。(v-model仅仅是一个语法糖,他内部还是自定义事件。)

父组件

<parent v-modle='parent'></parent>

子组件

props: {
    value: {
        default: ''
    }
},
methods: {
    handleClick() {
    this.$emit('input', data)
    }
},