如何巧妙运用v-model实现长尾词的父子组件传值？

本文共计766个文字，预计阅读时间需要4分钟。

v-model介绍+熟悉Vue的小伙伴们都知道+v-model是Vue的一个特性，可以实现双向数据绑定。但本质上，它并不是语法糖，而是负责监听用户的输入事件，以更新数据。以下内容摘自Vue官方文档。

v-model介绍

熟悉Vue的小伙伴们都知道 v-model 是Vue的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新数据。
以下摘取自Vue官方文档

v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：

• text 和 textarea 使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

如何巧妙利用 v-model实现父子组件传值

通常子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件。

但是熟悉上面 v-model 的实现原理后，我们可以巧妙地运用这一原理（v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件）。