Vue 温故而知新 props如何双向属性绑定

传送门: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', '你要修改的值') }

 

posted @ 2018-09-28 22:21  贝尔塔猫  阅读(400)  评论(0编辑  收藏  举报