MENU

对.sync修饰符的理解

September 28, 2020 • Read: 100 • Vue

Grit

sync 修饰符

vue 项目中,父子组件之间的数据通信为:

父组件向子组件传递值

// 父组件
<father :status='statusValue'>

//子组件
...
<div>{{status}}</div>
... 
props:['status']

子组件改变父组件数据

//子组件
...
<div @click='$emit('handle',someValue)'>{{status}}</div>
... 
props:['status'],
data(){
    return {
        someValue:'someValue'
    }
}

//// 父组件
<father :status='statusValue' @handle='getVal'>
...

getVal(val){
    console.log(val)  // 'someValue'
}

由于vue规定不能直接修改不可修改其外部数据 props

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”

vue提供update:myPropName 的模式触发事件取而代之. 例如:

在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

为了方便起见,vue 还提供了一种缩写形式, 即 .sync 修饰符

<text-document v-bind:title.sync="doc.title"></text-document>

当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:

<text-document v-bind.sync="doc"></text-document>

当子组件执行 title 事件的时候,不仅改变了自己内部的 newTitle 的值,而且还将 父组件的 doc.title的值发生了改变.

100