我刚刚发现除了 data
之外还有一个名为 model
的属性,但不幸的是我在 Vue 文档中找不到任何关于这个的信息。它是什么?如果这就是我所期望的,例如实际的数据模型,那么它比 data
有什么优势?应该在哪里使用以及如何使用?
最佳答案
model
与 data
完全不同,其功能也不相似。
model
与 v-model
有关指令。
首先,你应该知道 v-model
实际上是 :value
的语法糖和 @input
.粗略地说,这意味着,当您使用:
<input type="text" v-model="myVar">
在实践中它变成了:
<input type="text" :value="myVar" @input="myVar = $event.target.value">
现在,<input>
是原生元素。假设您声明了自己的自定义元素。你元素需要 value
并发出 @input
?
如果是,则一切正常,您可以使用 v-model
在其中(它是下面演示中的 fancy-text-box
)。但如果没有,您可以使用 model
解决它。 .
您使用 model
当您创建一个您希望用户可以使用的自定义组件时 v-model
在其中但是在内部,您不希望有 value
支持并发出 input
事件(参见下面的 ultra-fancy-text-box
)。
Vue.component('fancy-text-box', {
template: '#ftb',
props: ['value'],
methods: {
updateStuff(e) {
this.$emit('input', e.target.value);
}
}
});
Vue.component('super-fancy-text-box', {
template: '#sftb',
props: ['initial'],
methods: {
doHowdy(e) {
this.$emit('howdy', e.target.value);
}
}
});
Vue.component('ultra-fancy-text-box', {
template: '#uftb',
props: ['initial'],
model: {
prop: 'initial',
event: 'howdy'
},
methods: {
doHowdy(e) {
this.$emit('howdy', e.target.value);
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
.box { border: 1px solid red; margin: 5px; }
body { font-family: verdana; font-size: x-small; }
.fancy { border: 1px dashed purple; }
<script src="https://unpkg.com/vue"></script>
<div id='app'>
<fancy-text-box :value="message" @input="message = $event"></fancy-text-box>
<div class="box">
<fancy-text-box v-model="message"></fancy-text-box> This one WORKS because v-model sets a :value and expects an @input. And fancy-text-box does take a 'value' prop and emits an 'input' event.
</div>
<super-fancy-text-box :initial="message" @howdy="message = $event"></super-fancy-text-box>
<div class="box">
<super-fancy-text-box v-model="message"></super-fancy-text-box> This one DOESN'T WORK because v-model sets a :value and expects an @input. And super-fancy-text-box takes an 'initial' prop and emits a 'howdy' event instead.
If you declared <code>model: {prop: 'initial', event: 'howdy'},</code> it would make v-model work.
</div>
<div class="box">
<ultra-fancy-text-box v-model="message"></ultra-fancy-text-box> This one WORKS because v-model sets a :value and expects an @input. And, although ultra-fancy-text-box takes an 'initial' prop and emits a 'howdy' event, we have declared <code>model: {prop: 'initial', event: 'howdy'}</code>.
</div>
</div>
<template id="ftb"><input class="fancy" :value="value" @input="updateStuff"></template>
<template id="sftb"><input class="fancy" class="fancy" :value="initial" @input="doHowdy"></template>
<template id="uftb"><input class="fancy" :value="initial" @input="doHowdy"></template>
关于vue.js - Vue : Model vs. 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49834269/