【重點】為什麼元件中的data屬性必須定義為一個方法並返回一個物件
通過計數器案例演示

使用components屬性定義區域性子元件
元件例項定義方式：

<script>
    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: { // 定義子元件
        account: { // account 元件
          template: '<div><h1>這是Account元件{{name}}</h1><login></login></div>', // 在這裡使用定義的子元件
          components: { // 定義子元件的子元件
            login: { // login 元件
              template: "<h3>這是登入元件</h3>"
            }
          }
        }
      }
    });
  </script>
引用元件：

<div id="app">
    <account></account>
  </div>
使用flag識別符號結合v-if和v-else切換元件
頁面結構：

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <my-com1 v-if="flag"></my-com1>
    <my-com2 v-else="flag"></my-com2>
  </div>

Vue例項定義：

<script>
    Vue.component('myCom1', {
      template: '<h3>奔波霸</h3>'
    })

    Vue.component('myCom2', {
      template: '<h3>霸波奔</h3>'
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>

使用:is屬性來切換不同的子元件,並新增切換動畫
元件例項定義方式：

// 登入元件
    const login = Vue.extend({
      template: `<div>
        <h3>登入元件</h3>
      </div>`
    });
    Vue.component('login', login);

    // 註冊元件
    const register = Vue.extend({
      template: `<div>
        <h3>註冊元件</h3>
      </div>`
    });
    Vue.component('register', register);

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });
使用component標籤，來引用元件，並通過:is屬性來指定要載入的元件：

<div id="app">
    <a href="#" @click.prevent="comName='login'">登入</a>
    <a href="#" @click.prevent="comName='register'">註冊</a>
    <hr>
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>
  </div>
新增切換樣式：

<style>
   .v-enter,
   .v-leave-to {
     opacity: 0;
     transform: translateX(30px);
   }

   .v-enter-active,
   .v-leave-active {
     position: absolute;
     transition: all 0.3s ease;
   }

   h3{
     margin: 0;
   }
 </style>