关于前端:Vuesync和thisemitupdatetitle-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">