介绍
在本文中,您将了解如何在 Vue.js 中为自定义组件添加v-model指令。
前提条件
要了解有关双向数据绑定的更多信息,请参阅我们的 如何在 Vue.js 中使用 v-model for Two-Way Binding 教程。
实施V模型指令
要了解如何在您的组件中实现v-model支持,您需要了解它如何在帽子下工作。
因此,为了使您的组件与v-model指令兼容,它必须接受:value和@input属性,在用户与您的 Vue.js 应用程序互动时添加和发行值。
在您的DatePicker.vue文件中,创建一个自定义组件,在对象中接受一个月和年值。 :value’ 和 @input’ 属性将代表您组件中引用的值。
1[label DatePicker.vue]
2<template>
3 <div class="date-picker">
4 Month: <input type="number" ref="month-picker" :value="value.month" @input="updateDate()"/>
5 Year: <input type="number" ref="year-picker" :value="value.year" @input="updateDate()"/>
6 </div>
7</template>
8
9<script>
10export default {
11 props: ['value'],
12
13 methods: {
14 updateDate() {
15 this.$emit('input', {
16 month: +this.$refs.monthPicker.value,
17 year: +this.$refs.yearPicker.value
18 })
19 }
20 }
21};
22</script>
在脚本标签中,您的自定义方法updateDate()应用.$emit()公共实例属性以根据用户输入更新月和年中的值。
若要在其他 Vue.js 文件中使用自定义组件,请设置v-model指令以将您在WrapperComponent.vue文件中的月和年属性的值绑定并添加:
1[label WrapperComponent.vue]
2<template>
3 <div class="wrapper">
4 <date-picker v-model="date-picker"></date-picker>
5 <p>
6 Month: {{date.month}}
7 Year: {{date.year}}
8 </p>
9 </div>
10</template>
在脚本标签中,导入您的自定义组件并将其插入到组件属性中,将您的DatePicker组件中的功能应用到您的WrapperComponent.vue文件中:
1[label WrapperComponent.vue]
2<script>
3import DatePicker from './DatePicker.vue';
4
5export default {
6 components: {
7 DatePicker
8 },
9
10 data() {
11 return {
12 date: {
13 month: 1,
14 year: 2017
15 }
16 }
17 }
18})
19</script>
数据() 模型存储并返回您的月和年属性中的值。
要审查,与自定义组件的双向绑定需要属性 :value 和 @input 在一个呼叫中添加和发出更新的日期。
在高级组件中练习v模型
通过使用一个或多个计算属性,您可以将数据(如字符串)集成到可管理元素的格式输入中,这通常用于处理各种潜在输入格式的先进自定义组件。
在您的StringDatePicker.vue文件中,创建一个自定义组件,通过一个具有结构m/yyyy的字符串。 将您的:value和@input属性设置到您的输入中,以接受和更新自定义组件的值:
1[label StringDatePicker.vue]
2<template>
3 <div class="date-picker">
4 Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/>
5 Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/>
6 </div>
7</template>
通过使用计算属性,在这种情况下是splitDate,您可以将输入字符串分割并返回具有月和年属性的对象:
1[label StringDatePicker.vue]
2<script>
3export default {
4 props: ['value'],
5
6 computed: {
7 splitDate() {
8 const splitValueString = this.value.split('/');
9
10 return {
11 month: splitValueString[0],
12 year: splitValueString[1]
13 }
14 }
15 },
16
17 methods: {
18 updateDate() {
19 const monthValue = this.$refs.monthPicker.value;
20 const yearValue = this.$refs.yearPicker.value;
21 this.$emit('input', `${monthValue}/${yearValue}`);
22 }
23 }
24};
25</script>
「方法」對象應用「updateDate()」屬性來發出從輸入字串中更新的「月」和「年」字符串,您現在可以將「StringDatePicker」先進的自訂組件輸入到另一個檔案中,並運行「v-model」指令以同時結合和添加您的「月」和「年」屬性中的值。
结论
v 模型指令在定制 Vue.js 组件中实现时提供了额外的功能,您还可以将双向数据绑定集成到先进的定制组件中,以便将数据类型处理成精确的格式。
有关 Vue.js 的更多信息,请参阅 Vue.js 主题页面。