Vue方向：async修饰符改变父组件的状态与组件上使用v-model

1、原生事件修饰符 .native

1.1  关于组件标签上的事件

在组件标签上是没有办法触发原生的 js 事件的，vue会将其作为自定义事件的处理

代码

执行结果

此时在子组件上绑定的是自定义的事件而不是原生的事件，因为通过自定义事件，我们就可以通过使用触发自定义事件的方式来触发，通过$emit触发这个组件标签上的自定义事件。

children代码

home代码

执行结果

1.2  可以通过 .native 修饰符来处理组件标签上的原生事件

如果需要在子组件的dom上绑定原生的事件，而不是一个自定义事件，这时，可以通过 Vue 提供的修饰符 .native 来告知绑定的是原生事件。

children代码

home代码

执行结果

2、双向绑定的修饰符 .sync

在一些情况下，可能会需要对一个prop进行双向绑定，事实上，这正是 Vue 1.X中的 .sync 修饰符提供的功能，当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值，这很方便，但也会导致问题，因为它破坏了单向数据流，由于子组件改变props的代码和普通的状态改动代码毫无差别，但看子组件的代码时，完全不知道它是什么时候改变了父组件的状态。这在调试复杂结构的应用时会带来很高的维护成本。

上面所说的正是在Vue 2.x中移除了 .sync 的理由，但是 .sync 还是有其适用之处，比如在开发可复用的组件库时，需要让子组件改变父组件状态的代码更容易被区分

在 2.3.0之后 .sync 修饰符只是作为一个编译时的语法糖存在，它会被扩展为一个自动更新父组件属性的 v-on 监听器。

2.1  之前组组件想要修改父组件状态值的写法：

home代码

children代码

2.2  使用 .sync 修饰符后的写法

总结：

很显然 :counts.sync="counts" 会被扩展成  :counts="counts"      @update:counts="handleParentClick"，当子组件需要更新 counts的值时，它需要显示地触发一个更新的事件 handChild。

3、 组件的双向数据绑定 v-model

v-model指令一般用来处理双向数据绑定，主要是体现在表单元素上

双向数据绑定就是数据变化，显示的视图也会随之发送变化，视图一旦改变，vue中的数据也会发送变化。

3.1  使用事件的表单控件

就是我们将data中的数据绑定到表单的value值上，这样只会在数据变化的时候改变视图，但是视图的改变会不会修改数据？那么可以使用一个事件来处理这个事情，当用户输入内容后就会触发函数，在函数内最新的值修改掉data中的数据。

代码

执行结果

3.2  利用自定义事件处理组件中表单的双向数据绑定

利用同样的思路，将父组件的数据通过单向下行数据流传给子组件，在利用自定义事件，将子组件的数据传递给父组件，处理成自定义的双向数据绑定。

children代码

home代码

执行结果

3.3  自定义组件的 v-model

Vue中给我们允许在自定义组件上使用v-model来处理双向数据绑定。

子组件代码

父组件代码

执行结果

总结：

组件中的 v-model 等价于 :value="value"    @input="handleParentClick"