我什么时候应该使用活动

下图说明了组件通信应如何工作。图片来自 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
  }
});

请注意输入更新的速度。