Vue：模型与数据

Question

我刚刚发现除model之外还有一个名为data的属性，但遗憾的是我在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 1}}支持并发出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>