Vue .sync 笔记

.sync

2022.3.24 zgn

- 场景

在vue中，组件是不可直接修改props外部数据的，因此vue推荐使用update:myPropName 的模式触发事件来完成修改。 举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法对提供数据的组件表示想要更改数据：

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

然后提供数据的组件可以监听子事件的update:title 并根据需要更新本地的数据 property。例如：

< Child :monery="title" v-on:update:title="title = $event" >
 </Child>

子组件$emit 可以触发事件并传递一个参数，而监听这个事件的父组件可以通过$event来接收这个参数

- 简写

这种场景应用是非常高频，但是每次写这样的代码会比较复杂，因此Vue提供了一种简便写法

< Child :monery.sync ></Child>