vue.js 自定义组件

While v-model is a powerful asset for adding two-way data-binding to vanilla components, it’s not always readily apparent how to add support for v-model to your own custom components. Turns out though, it’s pretty simple.

尽管v-model是用于在原始组件中添加双向数据绑定的强大资产，但如何在自己的自定义组件中添加对v-model的支持并不总是显而易见。 事实证明，这很简单。

介绍 (Introduction)

To understand how to implement v-model support in your components, you need to understand how it works under the hood. Even though it seems like magic, v-model=“syncedProp” is actually a very simple shorthand for :value=“syncedProp” =“syncedProp = arguments[0]” (or :value=“syncedProp” =“syncedProp = $event.target.value” in vanilla components.)

要了解如何在组件中实现v模型支持，您需要了解其幕后工作方式。 尽管看起来很神奇，但v-model =“ syncedProp”实际上是：value =“ syncedProp” =“ syncedProp = arguments [0]” (或：value =“ syncedProp” =“原始组件中的syncedProp = $ event.target.value” 。)

As such, all your component needs to do to be compatible with v-model is accept a :value property and emit an @input event when the user changes the value.

因此，与v-model兼容的所有组件所需要做的就是接受：value属性，并在用户更改值时发出@input事件。

基本实施 (Basic Implementation)

Say you have a date picker component that accepts a month and a year value in an object with the form: {month: 1, year: 2017}. You want that component to have two inputs, one for the month and one for the year, and update the bound object through v-model. Here’s how you would implement that.

假设您有一个日期选择器组件，该对象在一个对象中接受一个月和一年的值，格式为： {month：1，year：2017} 。 您希望该组件具有两个输入，一个用于月份，一个用于年份，并通过v-model更新绑定的对象。 这是实现该方法的方法。

And here’s how another component would use the date picker:

这是另一个组件如何使用日期选择器的方法：

As you can see, it simply takes a :value property and emits an @input event with the updated date. Nothing too complicated at all!

如您所见，它只带有：value属性，并发出带有更新日期的@input事件。 一点都不复杂！

高级用法 (Advanced Usage)

By using one or more computed properties, we can denormalize input data such as strings into a format that the input elements can more easily work with. This is often used with more advanced custom components that have to deal with a wide variety of potential input formats, such as color pickers.

通过使用一个或多个计算属性，我们可以将诸如字符串之类的输入数据反规范化为输入元素可以更轻松地使用的格式。 它通常与更高级的自定义组件一起使用，这些组件必须处理各种潜在的输入格式，例如颜色选择器。

For our basic date picker example, let’s assume that the format the date is passed in is now a string with the structure m/yyyy. By using a computed property (in this case, splitDate), we can split the input string into an object with month and year properties, while making only minimal modifications to the date picker component.

对于我们的基本日期选择器示例，我们假设传递日期的格式现在是具有m/yyyy结构的字符串。 通过使用计算属性(在本例中为splitDate )，我们可以将输入字符串拆分为具有month和year属性的对象，同时仅对日期选择器组件进行最少的修改。

Note: This is an utterly terrible way of handling date input and is only used to illustrate the points in this article. Don’t use it in anything you hold dear.

注意：这是处理日期输入的一种非常糟糕的方式，仅用于说明本文中的要点。 请勿在您认为宝贵的任何物品中使用它。

Once you get familiar with the concepts presented here, you’ll probably find yourself using v-model for any and every component you create that takes user input. It’s a remarkably simple but powerful way of adding two-way data binding support in your own custom components.

熟悉此处介绍的概念后，您可能会发现对使用用户输入的任何所创建组件都使用v模型。 这是在您自己的自定义组件中添加双向数据绑定支持的非常简单但功能强大的方法。

翻译自:

vue.js 自定义组件