通过 Prop 向子组件传递数据、监听子组件事件

1.通过 Prop 向子组件传递数据
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
我们可以静态传参：

<blog-post title="My journey with Vue"></blog-post>

我们可以使用 v-bind 来动态传递 prop:

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

可以在子组件中字符串数组形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

也可以给每个prop都可以指定值的类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
2.监听子组件事件
父组件可以监听子组件的事件。父级组件可以通过 v-on 监听子组件实例的任意事件。
同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件。
有的时候用一个事件来抛出一个特定的值是非常有用的。这时可以使用 $emit 的第二个参数来提供这个值。然后当在父级组件监听这个事件的时候，我们可以通过$event访问到被抛出的这个值。或者，如果这个事件处理函数是一个方法，那么这个值将会作为第一个参数传入这个方法。

3.代码
使用脚手架ini一个vue项目：
vue init webpack learn-vue
切换到这个目录下：
cd learn-vue
启动项目:
npm run dev

主要添加的vue文件：
BlogPage.vue:

<template>
  <div>
    <div :style=" {fontSize: postFontSize + 'em'}">
      <p>Blog</p>
      <blog-post
      v-for="post in posts"
      :key="post.id"
      :title="post.title"
      :likes="post.likes"
      :post="post"
      @enlarge-text="postFontSize += $event"
      @reduce-text="onReduceText">
     </blog-post>
     <!-- prop中传入静态值 -->
     <blog-post title="Learn Vue" :likes="42" :post="{id:'5'}"></blog-post>
    </div>
  </div>
</template>

<script>
import BlogPost from '@/components/BlogPost'

export default {
  components: {
    BlogPost
  },
  data: function () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue', likes: 23 },
        { id: 2, title: 'Blogging with Vue', likes: 43 },
        { id: 3, title: 'Why Vue is so fun' }
      ],
      postFontSize: 1
    }
  },
  methods: {
    onReduceText: function (enlargeAmount) {
      this.postFontSize -= enlargeAmount
    }
  }
}
</script>

<style>

</style>

BlogPost.vue

<template>
  <div>
    <h3>title:{{ title }}, likes:{{likes}}, id:{{post.id}}</h3>
    <button @click="$emit('enlarge-text', 0.1)">
      Enlarge text
    </button>
    <button @click="$emit('reduce-text', 0.1)">
      Reduce text
    </button>
  </div>
</template>

<script>
export default {
  // props: ['title'],
  props: {
    title: String,
    likes: {
      type: Number,
      default: 0
    },
    post: Object
  },
  data: function () {
    return {
      count: 0
    }
  }

}
</script>

<style>

</style>

学习链接：https://cn.vuejs.org/v2/guide/components.html