vue子组件修改父组件属性值的两种方法

1、子组件调用$emit 方法来触发父组件的事件，从而修改属性值

// 父组件 传属性title和changeTitle方法给子组件
<div>
    <blog :title="title" @changeTitle="changeTitle"></blog>
</div>

// 父组件中的changeTitle方法
changeTitle(value) {
  this.title = value;
}

子组件接收父组件传的属性title，并可以点击修改title的值

// 子组件接收父组件传的属性title
props: {
  title: String
}

// 子组件调用$emit方法来修改title的值
<div @click="$emit('changeTitle','new title')">
  {{title}}
</div>

2、使用.sync配合$emit方法以update的模式触发事件从而修改父组件属性值

// 父组件 传属性title给子组件，使用.sync修饰符
<div>
    <blog :title.sync="title"></blog>
</div>

子组件接收父组件传的属性title，并可以点击修改title的值

// 子组件接收父组件传的属性title
props: {
  title: String
}

// 子组件调用$emit方法以update的模式触发事件来修改title的值
<div @click="$emit('update:title','new title')">
  {{title}}
</div>