百度投诉电话人工服务总部,苏宁网站优化与推广,特色直播app下载,网站关键词分隔.sync 修饰符以前存在于 Vue1.0 版本里#xff0c;后来在2.0版本中移除了 .sync 修饰符。 但是在 2.0 发布之后的实际应用中#xff0c;发现 .sync 还是有其适用之处#xff0c;比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。 从….sync 修饰符以前存在于 Vue1.0 版本里后来在2.0版本中移除了 .sync 修饰符。 但是在 2.0 发布之后的实际应用中发现 .sync 还是有其适用之处比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。 从 2.3.0 起重新引入了 .sync 修饰符但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
1 使用情景
需要父组件给子组件传值 子组件通过 emit 改变该值
2 原写法
v-bind 传值 money 给子组件 并绑定事件 update:money 改变 money 值
父组件
templatediv classappChildv-bind:moneytotal v-on:update:moneymoney $event//div
/template子组件
templatediv classchild{{ money }}button click$emit(update:money, money - 100)/button/div
/templatescript
export default {props: [money],
};
/script3 为了方便起见为这种模式提供一个缩写即 .sync 修饰符
示例https://codesandbox.io/s/white-glade-xhj86?file/src/App.vue
父组件
templatediv classappChild v-bind:money.synctotal /!-- 或 Child :money.synctotal / --/div
/template4 需要注意的是
带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync”doc.title ‘!’” 是无效的)。取而代之的是你只能提供你想要绑定的 property 名类似 v-model。当我们用一个对象同时设置多个 prop 的时候也可以将这个 .sync 修饰符和 v-bind 配合使用
text-document v-bind.syncdoc/text-document这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去然后各自添加用于更新的 v-on 监听器。
将 v-bind.sync 用在一个字面量的对象上例如 v-bind.sync”{ title: doc.title }”是无法正常工作的因为在解析一个像这样的复杂表达式的时候有很多边缘情况需要考虑。
