vue中.sync的使用详解

vue中.sync的使用详解

1. 父子组件传值

在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们需要在子组件内部改变props属性值并更新到父组件中，需要用到.$emit来传递属性值

代码

//===================================父组件





//===================================子组件

2. .sync修饰符

:title.sync就是:title="title" @update:title="title= $event"的缩写。

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”title + ‘!’” 是无效的)。

//===================================父组件

效果

当用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

代码

//===================================父组件




//===================================子组件

效果