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

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

子组件中写法：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    

      
{{ post.title }}
      
        Enlarge text
      
      

    
  `
})

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

如何告诉父级组件：

子组件写法：

  Enlarge text

子组件中也可以这样写：

this.$emit('myEvent')

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

 

父组件写法：

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

 

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

 

使用事件抛出一个值：

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

子组件中写法：

  Enlarge text

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

父组件中写法：

 

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

 

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