Vue 温故而知新 props如何双向属性绑定-优快云博客

本文详细介绍Vue.js中三种组件间通信的方法：$emit事件回调、@update状态更新事件及v-bind.sync绑定。通过实例演示如何在父子组件间传递数据，实现状态更新。

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

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

1、最单纯的做法：$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>

2、官方推荐的做法： @update 状态更新事件

原理同1，我是看不出区别。主要是更加规范吧，看到这个就知道是双向属性更新了。同时也少了自定义事件名的烦恼。

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

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

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

3、我强烈推荐的做法：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', '你要修改的值')
}

转载于:https://www.cnblogs.com/CyLee/p/9721285.html