介绍 (Introduction)
The v-model
directive is one of the few directives that comes bundled with Vue.js. This directive allows for two-way data binding between our data and views.
v-model
指令是Vue.js附带的少数几个指令之一。 该指令允许在我们的数据和视图之间进行双向数据绑定。
With two-way data binding, when we update our data via input fields or other controls, we can modify the DOM without having to do DOM work.
通过双向数据绑定,当我们通过输入字段或其他控件更新数据时,我们可以修改DOM,而无需执行DOM工作。
In this article you’ll explore how this directive works and use it for your own components.
在本文中,您将探索此指令的工作方式并将其用于您自己的组件。
v模型在内部如何工作 (How v-model works internally)
From our knowledge of HTML, we know that input
, select
, textarea
are the main ways we feed data to our application.
根据对HTML的了解,我们知道input
, select
, textarea
是将数据馈送到应用程序的主要方式。
For v-model
to work, it expects the element or component in question to receive a prop (default is value) and also emit an event (default is input.)
为了使v-model
正常工作,它希望所讨论的元素或组件能够接收prop(默认值为value)并发出事件(默认为input)。
Depending on the element, Vue decides how to listen and handle the data. For input
elements, you might use v-model
like this:
根据元素的不同,Vue决定如何监听和处理数据。 对于input
元素,可以这样使用v-model
:
<input v-model="email" />
v-model
translates to this:
v-model
转换为:
<input :value="email" @input="e => email = e.target.value" />
Vue uses this expansion to handle textarea
, select
and some other input
types.
Vue使用此扩展来处理textarea
, select
和其他一些input
类型。
For radio buttons and checkboxes, Vue uses their checked
prop and listens for their change
event.
对于单选按钮和复选框,Vue使用其checked
道具并监听其change
事件。
For elements like select
tags and checkboxes that can accept multiple values, Vue will automatically return an array of selected values.
对于可以接受多个值的元素(如select
标签和复选框),Vue将自动返回一组选定值。
如何将v模型添加到自定义组件 (How to add v-model to custom components)
To let our component support v-model
two-way binding, the component needs to accept a value
prop and emit an input
event.
为了让我们的组件支持v-model
双向绑定,组件需要接受一个value
prop并发出一个input
事件。
Let’s create a sample component called basic-input
. We’ll use Vue’s single file component:
让我们创建一个称为basic-input
的示例组件。 我们将使用Vue的单个文件组件 :
<template>
<input @input="handleInput" />
</template>
<script>
export default {
prop: ['value'],
data () {
return {
content: this.value
}
},
methods: {
handleInput (e) {
this.$emit('input', this.content)
}
}
}
</script>
To support v-model
, the component accepts a value
prop and emits an input
event.
为了支持v-model
,组件接受一个value
prop并发出一个input
事件。
Use the component like this:
使用这样的组件:
<basic-input v-model="email" />
自定义v模型道具和事件 (Customizing v-model prop and event)
Let’s take it a step further. We might not want to use the default event and prop needed to add v-model
support to our components. Thankfully, Vue allows us to customize it.
让我们更进一步。 我们可能不想使用向组件添加v-model
支持所需的默认事件和prop。 幸运的是,Vue允许我们对其进行自定义。
To customize the event and prop, we add a model
property to our component and define the new values like this:
为了自定义事件和道具,我们向组件添加model
属性并定义新值,如下所示:
export default {
prop: ['hidden'],
model: {
prop: 'hidden',
event: 'blur'
}
methods: {
handleInput (value) {
this.$emit('blur', value)
}
}
}
This time, when you use the component like this:
这次,当您使用这样的组件时:
<basic-input v-model="email" />
Vue will automatically convert it into:
Vue会自动将其转换为:
<basic-input :hidden="email" @blur="e => email = e.target.value" />
With this in place, you can avoid conflicts when defining your component’s prop and events.
有了这个,您就可以避免在定义组件的prop和事件时发生冲突。
在ContentEditable上使用v模型 (Using v-model on ContentEditable)
A content editable element is a div
or similar element that can be configured to work as an input.
内容可编辑元素是div
或类似元素,可以将其配置为用作输入。
We define content editable elements by adding the contenteditable
attribute to the element:
我们通过将contenteditable
属性添加到元素来定义内容可编辑元素:
<div class="editor" contenteditable="contenteditable"></div>
You’ll use content editable elements for WYSIWYG editors as they are easier to work with and are supported by a large amount of browsers.
您将为所见即所得(WYSIWYG)编辑器使用内容可编辑的元素,因为它们易于使用并且受到大量浏览器的支持 。
v-model
will work on content editable elements, but you need to explicitly use the content of the element, or the content will not be emitted.
v-model
将对内容可编辑元素起作用,但是您需要显式使用元素的内容,否则将不会发出内容。
To emit the content, you need to grab the innerText
or innerHTML
of the div
. So, our updateInput
method needs to look like this
要发出内容,您需要获取div
的innerText
或innerHTML
。 因此,我们的updateInput
方法需要看起来像这样
updateInput () {
this.$emit('input', this.$el.innerText)
}
You can also use the content of a ref instead of the root element’s content.
您还可以使用ref的内容而不是根元素的内容。
With this in place, v-model
will work for content editable elements. You could also update this.content
in the updateInput
method.
有了这个, v-model
将适用于内容可编辑元素。 您也可以在updateInput
方法中更新this.content
。
结论 (Conclusion)
Now that you have seen how to use v-model
with custom Vue components, go build or refactor your components that require the use of v-model
.
既然您已经了解了如何将v-model
与自定义Vue组件一起使用,请构建或重构需要使用v-model
。
翻译自: https://www.digitalocean.com/community/tutorials/how-to-add-v-model-support-to-custom-vue-js-components