我什麼時候應該使用活動

下圖說明了元件通訊應如何工作。圖片來自 Evan You （VueJS 的開發者） 的 Progressive Framework 幻燈片。

以下是它的工作原理示例：

DEMO

HTML

<script type="x-template" id="message-box">
    <input type="text" v-model="msg" @keyup="$emit('new-message', msg)" />
</script>
 
<message-box :msg="message" @new-message="updateMessage"></message-box>
<div>You typed: {{message}}</div>

JS

var messageBox = {
  template: '#message-box',
  props: ['msg']
};
 
new Vue({
  el: 'body',
  data: {
    message: ''
  },
  methods: {
    updateMessage: function(msg) {
      this.message = msg;
    }
  },
  components: {
    'message-box': messageBox
  }
});

上面的例子可以改進！

上面的示例顯示了元件通訊的工作原理。但是在自定義輸入元件的情況下，要將父變數與鍵入的值同步，我們可以使用 v-model。

DEMO Vue1

DEMO Vue2

在 Vue1 中，你應該在傳送到 <message-box> 元件的 prop 上使用 .sync。這告訴 VueJS 將子元件中的值與父元件同步。

請記住： 每個元件例項都有自己獨立的範圍。

HTML Vue1

<script type="x-template" id="message-box">
  <input v-model="value" />
</script>

<div id="app">
  <message-box :value.sync="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

在 Vue2 中，有一個特殊的'input'活動你可以知道。使用此事件可以將 v-model 直接放在 <message-box> 元件上。該示例如下所示：

HTML Vue2

<script type="x-template" id="message-box">
  <input :value="value" @input="$emit('input', $event.target.value)" />
</script>

<div id="app">
  <message-box v-model="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

JS Vue 1＆2

var messageBox = {
  template: '#message-box',
  props: ['value']
};

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  components: {
    'message-box': messageBox
  }
});

請注意輸入更新的速度。