可实现对prop 进行“双向绑定”。
用法:
一、同时设置1个 prop
1.以 update:my-prop-name
的模式触发事件,如对于title属性:
this.$emit(‘update:title‘, newTitle)
2.然后父组件可以监听那个事件并根据需要更新一个本地的数据属性:
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document>
为了方便起见,我们为这种模式提供一个缩写,即 .sync
修饰符:
<text-document v-bind:title.sync="doc.title"></text-document>
二、同时设置多个 prop
当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync
修饰符和 v-bind
配合使用:
<text-document v-bind.sync="doc"></text-document>
这样会把 doc
对象中的每一个属性 (如 title
) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on
监听器。
原文地址:https://www.cnblogs.com/vickylinj/p/9573686.html
时间: 2024-10-08 04:41:27