Vue的四个重要修饰符

175 阅读1分钟

一 .sync修饰符代码示例

子组件想要更新父组件的title,用$emit触发事件

$emit('update:title', newTitle)

父组件可以监听对应事件,并从$event中获取参数,同时可以根据需要更新一个本地的数据 property

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

二 .sync修饰符

一般而言子组件不能修改props外部数据,当组件希望改变了一个 props 的值时,这个变化需要通过$emit触发事件通知父组件,同时父组件通过$event来获取$emit的参数。

:title="doc.title"
v-on:update:title="doc.title = $event"

由于上述场景很常见,可以使用.sync语法糖代替上述写法

:title.sync="doc.title"

三 其他修饰符

@click.stop="add"//表示阻止事件冒泡
@click.prevent="add"//表示阻止默认动作
@click.stop.prevent="add"//同时表示两种意思
@keypress.enter="fn"//点击enter键