1.  vue元件

什麼是元件： 元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可。

元件化和模組化的不同：

模組化：是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，保證每個功能模組的職能單一

元件化：是從UI介面的角度進行劃分的；前端的元件化，方便UI元件的重用

2.全域性元件定義的四種方式

1.使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
    template: '<h1>登入</h1>
 
'
  });
  Vue.component('login', login); 

2.直接使用 Vue.component 方法

Vue.component('register', {
    template: '<h1>註冊</h1>'
  });

3.將模板字串，定義到script標籤中：

<script id="tmpl" type="x-template">
    <div><a href="#">登入</a> | <a href="#">註冊</a></div>
  </script>

同時，需要使用 Vue.component 來定義元件：

Vue.component('account', {
    template: '#tmpl'
  });

4.將模板字串，定義到template標籤中：

< template id="tmpl">
    <div><a href="#">登入</a> | <a href="#">註冊</a></div>
  </ template >

同時，需要使用 Vue.component 來定義元件：

Vue.component('account
 
', {
    template: '#tmpl'
  });

3.元件中展示資料和響應事件

在元件中，data需要被定義為一個方法

Vue.component('account', {
    template: '#tmpl',
    data() {
      return {
        msg: '大家好！'
      }
    },
    methods:{
      login(){
        alert('點選了登入按鈕');
      }
    }
  });

在子元件中，如果將模板字串，定義到了script標籤中，那麼，要訪問子元件身上的data屬性中的值，需要使用this來訪問

4.使用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>

5.slot插槽

什麼是插槽？插槽就是子元件中的提供給父元件使用的一個佔位符，用<slot></slot> 表示，父元件可以在這個佔位符中填充任何模板程式碼，如 HTML、元件等，填充的內容會替換子元件的<slot></slot>標籤。

插槽的使用:

在子元件中放入一個佔位符
<template>
<div>
<h1>今天天氣很好</h1>
<slot></slot>
</div>
</template>

在父元件中給這個佔位符填充

6.插槽的使用 - 具名插槽

描述：具名插槽其實就是給插槽取個名字。一個子元件可以放多個插槽，而且可以放在不同的地方，而父元件填充內容時，可以根據這個名字把內容填充到對應插槽中。

子元件的程式碼，設定了兩個插槽

<template>
<h2>
<slot name="header"></slot>
<slot name="footer"></slot>
</h2>
</template>

父元件填充內容, 父元件通過 v-slot:[name] 的方式指定到對應的插槽中

<template v-slot:footer>
<div>

</div>
</template>