13. 组建基础

基本示例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

所谓的组件，其实就是个小的vue实例，只不过换了个名字，所以vue带有的data，methods，computed，生命周期钩子等等它都会有。

组件复用

组件可以任意次数的复用，其数据和方法相互独立。

注意：data的写法和vue的不一样，它必须是个函数，这个写法保证了组件的数据是相互独立的。

通过prop向子组件传递数据

<blog-post title="Why Vue is so fun"></blog-post>


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

不一定非传递一个需要的值，你可以将这个子组件所有的属性打包成一个对象传递过去，这样子组件需要新的参数的时候就不需要去修改组件代码，而是直接使用.XXX获得值：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

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

子组件抛出事件

// 组件标签上写上on，来监听特定的事件
<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

// 子组件自身在抛出事件即可监听
<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

// 当然也可以带上值
<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>