「Vue」.sync修饰符

2021-08-05 254 阅读1分钟

应用场景：当父组件传递数据给子组件，子组件想要修改这个数据的时候，子组件不能直接修改传递过来的数据（否则Vue会报错），而是通过$emit触发更新数据的事件,并且把要修改的数据的最新值传递给父组件，让父组件来响应修改数据,父组件通过$event来接受要修改的数据的最新值

一、$emit

$emit 共接收两个参数：

{string} eventName 触发当前实例上的事件。
[...args] 附加参数都会传给监听器回调。

示例

子组件可以通过调用$emit传入事件名称update:money，第二个参数为要修改的数据的最新值：

 //child.vue
<template>
    <div class="child">
      爸爸有{{money}}元
       <button @click="$emit('update:money', money - 10)">我要花钱</button>
    </div>
</template>
  
<script>
  export default {
    props: ["money"]
  }
</script>

父组件使用v-on监听这个事件update:money，通过$event接受要修改的数据的最新值，然后响应子组件修改money

//parent.vue
<template>
  <div class="parent">
    <div>
      爸爸现在有{{ total }}元钱
      <hr/>
      <Child :money="total" v-on:update:money="total = $event"/>
    </div>
  </div>
</template>

<script>
import Child from "./child.vue"
export default {
  components: { Child },
  data() {
    return {
      total: 10000
    }
  }
}
</script>

二、.sync

.sync简化了上述代码，直接在父组件上使用

//parent.vue
<template>
  <div class="parent">
    <div>
      爸爸现在有{{ total }}元钱
      <hr/>
      <Child :money.sync="total"/>
    </div>
  </div>
</template>

:money.sync="total" 等价于:money="total" v-on:update:money="total = $event"

三、总结

组件不能直接修改props传进来的数据，而是要通知父组件修改
$emit可以触发事件并传参， $event可以获取$emit的参数

友情链接：