vue.js - Vue : Model vs. 数据

Question

我刚刚发现除了 data 之外还有一个名为 model 的属性，但不幸的是我在 Vue 文档中找不到任何关于这个的信息。它是什么？如果这就是我所期望的，例如实际的数据模型，那么它比 data 有什么优势？应该在哪里使用以及如何使用？

Answer 1

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>