vue子组件修改父组件的传值

Posted 2021-08-29 哈娄

1  .sync 修饰符

// 父组件
<home :title.sync="title" />
//编译时会被扩展为
<home :title="title"  @update:title="val => title = val"/>

// 子组件
// 所以子组件可以通过$emit 触发 update 方法改变
mounted(){
  this.$emit("update:title", '这是新的title')
}

2.传入引用类型数据，进行修改

// 父组件
<home :title="obj" />

data: {
    obj: {
        title: '哈哈'
    }
}

// 子组件
props: {
    obj: {
        type: Object,
        dafault: () => ({})
    }
}
mounted(){
  this.obj.title = 'haha2'
}