2019-07-16-模板无法使用，编译出错

使用 component

定义一个名为 button-counter 的新组件

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

npm run serve 后，浏览器端 console 出现如下报错

You are using the runtime-only build of Vue where the template compiler is not available. 
你正在使用【紧运行时】的 Vue，模板编译器不可用。
Either pre-compile the templates into render functions, or use the compiler-included build.
你可以将模板预编译，到渲染方法中，或使用含有编译的 build.

每个组件都会各自独立维护它的 count。每用一次组件，就会有一个它的新实例被创建。

  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>

data 必须是一个函数

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

data: {
  count: 0
}

一个组件的 data 选项必须是第一个函数。

---

组件的组织

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

从页面结构到组件树结构

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

要在模板中使用组件，必须先注册组件，以便 Vue 能够识别。
组件的注册类型：全局注册和局部注册。

全局注册: Vue.component

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

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

---

通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，就变成了那个组件实例的一个属性。

为了给 blog-post 组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

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

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

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

<blog-post title="My journey with my family"></blog-post>
<blog-post title="Blogging with my journey"></blog-post>
<blog-post title="Writting is so fun"></blog-post>

every component must have a single root element

每个组件必须只有一个根元素，你可以将模板的内容包裹在一个父元素内。

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

监听子组件事件

子组件，它的一些功能可能要求和父组件进行沟通。如：一个辅助功能放大博文的字号，同时让页面的其他部分保持默认的字号。

<div id="app">
  <div :style="{ fontSizeL postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post">  
    </blog-post>
  </div>
</div>

添加按钮

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

点击按钮时，我们需要告诉父级组件放大所有博文的文本。如何解决呢？
（1）父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：

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

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

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