vue组件间通信，通过事件向父组件发送消息

例子现在我们在每篇博文正文之前添加一个按钮来放大字号：

子组件中写法：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})

问题是这个按钮不会做任何事：当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。

如何告诉父级组件：

子组件写法：

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

子组件中也可以这样写：

this.$emit('myEvent')

通过vue自定义的事件系统来解决这个问题。我们可以调用内建的$emit方法并传入事件的名字，来向父组件触发一个事件。

 

父组件写法：

然后在父组件上监听这个原生的dom事件：

 

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

综上，子组件完成了通过事件向父组件传递信息。

 

使用事件抛出一个值：

有时候用一个事件来抛出一个特定的值是非常有用的，例如我们可能想让 <blog-post>组件决定它的文本要放大多少。这时我们可以用$emit的第二个参数来提供这个值：

子组件中写法：

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

在父组件监听这个事件的时候，我们可以通过$event访问到这个被抛出的值

父组件中写法：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

 

或者这个事件处理函数是一个方法，那么这个值将会作为第一个参数传入这个方法。

 

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}