我是怎麼學會vue的11：父組件和子組件

父組件經過全局的方式註冊。
子組件是在某個組件裏面註冊（不是在全局註冊，也不是Vue實例下面註冊）。

局部組件 和 子組件 的區別：
局部組件是在Vue實例下面註冊，子組件是在其餘組件裏面註冊

代碼演示：

<div id="app">
  <cpn2></cpn2>
  <!--<cpn1></cpn1>-->
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.建立第一個組件構造器(子組件)
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是子組件</h2>
        <p>我是內容</p>
      </div>
    `
  })

  // 2.建立第二個組件構造器(父組件)
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h2>我是父組件</h2>
        <p>我是內容</p>
        <!--使用子組件-->
        <cpn1></cpn1>
      </div>
    `,
    components: {
      //子組件cpn1註冊在其餘組件裏面
      cpn1: cpnC1
    }
  })

  const app = new Vue({
    el: '#app',
    components: {
      cpn2: cpnC2
    }
  })
</script>