Vue.sync和this.$emit('update:title', newTitle)实现组件通信

Vue通过prop进行双向数据绑定。子组件数据变化，一般只能通过 this.$emit(func, val) 回调父组件函数来传值给父组件。

Vue2.3版本引入sync，作为一个事件绑定语法糖，当子组件触发事件时，父组件会响应事件并实现数据更新： 官网

1. 使用Vue.sync和this.$emit('update:title', newTitle)

父组件代码：

data() {
  return {
    val: ''
  }
},


<child :childValue.sync="val"></child>
<div>{{val}}</div>

子组件代码：

props: {
  childValue: {
    type: String,
    default: ''
  },
},

data() {
  return {
      val: ''
  }
},

methods: {
  checkVal() {
      this.$emit('update:childValue', this.val)
  },
}

<input type="text" v-model="val" @input="checkVal">

上面的方法就是可以在子组件更改父组件的值了，除此之外，还可以使用$emit(fun, val)方法和$parent:

2. 使用$emit(fun, val)

父组件代码：

  data() {
    return {
      val: ''
    }
  },

  methods: {
      checkVal(val) {
          this.val = val
      },
  }


<child @checkVal="checkVal"></child>
<div>{{val}}</div>

子组件代码：

props: {

},

data() {
  return {
      val: ''
  }
},

methods: {
  checkVal() {
    this.$emit('checkVal', this.val)
  },
}


<input type="text" v-model="val" @input="checkVal">

3. 使用$parent

父组件代码：

  data() {
    return {
      val: ''
    }
  },

  methods: {
      checkVal(val) {
          this.val = val
      },
  }


<child></child>
<div>{{val}}</div>

子组件代码：

props: {

},

data() {
  return {
      val: ''
  }
},

methods: {
  checkVal() {
    // 通过 $parent层叠可以一层一层地往上追溯各级父组件，比如this.$parent.$patent.checkVal()
    this.$parent.checkVal(this.val)
  },
}


<input type="text" v-model="val" @input="checkVal">