Vue 溫故而知新 props如何雙向屬性綁定

傳送門：https://cn.vuejs.org/v2/guide/components-custom-events.html

https://segmentfault.com/q/1010000012055834/a-1020000012055960

 

一、最單純的作法：$emit 事件回調

// 父組件
<msgbox :god='title' @shift="fuck"></msgbox>

data () {
　　return {
　　　　title: '我是標題'
　　}
},
fuck (data) {
  this.title = fuck
}

// 子組件 <button @click='go'></button>

go () {
   this.$emit('shift', '你要更新的值');
}

（推薦）其實父組件若是隻是賦值的話，能夠寫的更簡潔一點。能夠省略回調函數的定義和綁定。

// 父組件
<msgbox :god='title' @shift="title = $event"></msgbox>

// 子組件
<button @click='go'></button>

go () {
   this.$emit('shift', '你要更新的值');
}

$event是內置變量，你甚至能夠這樣寫：

<msgbox :god='title' @shift=" val => title = val""></msgbox>

 

二、官方推薦的作法： @update 狀態更新事件

原理同1，我是看不出區別。主要是更加規範吧，看到這個就知道是雙向屬性更新了。同時也少了自定義事件名的煩惱。

// 父組件
<msgbox :god='title' @update:title="title = $event"></msgbox>

// 子組件
<button @click='go'></button>

go () {
  this.$emit('update:title', '你要修改的值')
}

 

三、我強烈推薦的作法：v-bind.sync

// 父組件，能夠省略 @update 或者 @event
// 等同於：<msgbox :god='title' @update:title="title = $event"></msgbox>
<msgbox :god.sync='title'></msgbox>

// 子組件
<button @click='go'></button>

go () {
    this.$emit('update:title', '你要修改的值')
}