组件基础

一、基本示例：

　　Vue 组件的实例：

　　组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件座位自定义元素来使用：

<div id="components-demo">
    <button-counter></button-counter>
</div>

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

    new Vue({
        el: '#components-demo'
    })

　　结果为：

 

 

二、组件的复用：

　　因为组件是可复用的 Vue 实例，所以它们与 new Vue 接受相同的选项，例如 data、compoted、watch、methods 以及声明周期钩子等。仅有的例外是像 el 这样根实例特有的选项；

　　例如将组件进行任意次数的复用：

<div id="components-demo">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    new Vue({
        el: '#components-demo'
    })

　　结果为：

 

　　data 必须是一个函数

 

 　　　　当我们定义这个 <button-counter> 组件时，可以看见 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

　　　　取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

　　　　如果没有这条规则，那么点击一个按钮就可能会影响到其他用了相同组件的所有实例；

三、组件的组织：

　　通常一个应用会以一颗嵌套的组件树的形式来组织：

　　例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其他的像导航链接、博文之类的组件。

　　为了能在模版中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

　　至此，我们的组件都只是通过 Vue.component 全局注册的：

Vue.component('my-component-name', {
  // ... options ...
})

　　全局注册的组件可以用在被注册之后的任何 （通过 new Vue)  新创建的 Vue 根实例，也包括其组件树中的所有子组件的模版中。

四、通过 Prop 向子组件传递数据

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

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

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

　　一个 prop 被注册之后，就可以把数据作为一个自定义 attribute 传递进来：

<div id="blog-post-demo">
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>
</div>

　　结果为：

 

 

 　　比如，你可能在 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' }
    ]
  }
})

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

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

　　结果为：

五、单个根元素：

　　当构件一个 <blog-post> 组件时，你的模版最终会包含的东西远不止一个标题：

<h3>{{ title }}</h3>

　　起码还得包含这片博文的正文：

<h3>{{ title }}</h3>
<div v-html="content"></div>

　　这样做的话，Vue 会显示一个错，解释 every component must have a single root element (每个组件必须只有一个根元素）。解决方法是 将模版的内容包裹在一个父元素内，来修复此问题：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

　　但是当组件变得越来越复杂的时候，我们的博文不只需要标题和内容，还需要发布日期，评论等等。为每一个相关信息定义一个 prop 会变得很麻烦：

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

　　所以通过重构这个 <blog-post> 组件了，让它变成接受一个单独的 post prop：

<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>
  `
})

六、监听子组件事件：

　　在开发 <blog-post> 组件时，他的一些功能可能要求和父级组件进行沟通。例如此处通过引入一个辅助功能来放大博文的字号，同时让页面你的其他部分保持默认的字号。

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

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

　　在模版中用来控制所有博文的字号：

<div id="blog-posts-events-demo">
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:post="post"
                v-on:enlarge-text="postFontSize += 0.1"
        ></blog-post>
    </div>
</div>

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

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

　　当点击按钮是，我们通过 Vue 实例提供的一个自定义组件的系统来解决这个问题。

　　父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：

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

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

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