Vue: 通过prop向子组件传递数据，并且监听子组件事件

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '
{{ title }}
'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：

然而在一个典型的应用中，你可能在 data 里有一个博文的数组：

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

并想要为每篇博文渲染一个组件：

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。

重构一下这个  组件，让它变成接受一个单独的 post prop：

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

      
{{ post.title }}
      

    
  `
})

监听子组件事件：

在我们开发  组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize 数据属性来支持这个功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

它可以在模板中用来控制所有博文的字号：

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

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

      
{{ post.title }}
      
        Enlarge text
      
      

    
  `
})

当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。我们使用v-on 监听子组件实例的任意事件：

同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件：

  Enlarge text

 

完整示例代码：

我们来改造以下，可以用v-on添加一个缩小文本的方法：

参考文档：组建基础——Vue.js

https://cn.vuejs.org/v2/guide/components.html