亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-12-07

1. 前言

本節我們將介紹如何使用組件（Component），組件是 Vue.js 最強大的功能之一，組件可以擴展 HTML 元素，封裝可重用的代碼。組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹：
圖片描述
如何規劃和設計組件是學習組件的難點，在編寫組件時，我們需要不斷思考如何提高組件的可復用性。

2. 慕課解釋

組件是可復用的 Vue 實例，且帶有一個名字。 —— 官方定義

組件是可復用的 Vue 實例， 我們可以把頁面中在多個場景中重復使用的部分，抽出為一個組件進行復用。組件大大提高了代碼的復用率。

3. 組件的注冊

3.1. 全局組件注冊

我們可以通過調用 Vue.component 的方式來定義全局組件，它接收兩個參數：1. 組件名，2. 組件屬性對象。

命名：

  • 短橫線：<my-component-name>
  • 駝峰式：<MyComponentName> 使用駝峰命名組件時，首字母最好以大寫字母開頭。

屬性對象：組件的屬性對象即為 Vue 的實例對象屬性。

全局組件可以在任何其他組件內使用，所以當我們設計的組件，需要在不同地方使用的時候，我們應當注冊全局組件。

// 注冊
// 駝峰命名
Vue.component('MyComponentName', {/* */})
// 短橫線命名
Vue.component('my-component-name', {/* */})
......
// 使用
<my-component-name></my-component-name>
// 也可以使用自閉和的方式
<my-component-name />

具體示例如下：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component></my-component>
    <my-component /> 
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div>Hello ！</div>'
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
JS 代碼第 3-5 行，我們注冊了一個全局組件 myComponent，并在 html 內使用兩種方式引用了該組件。

3.1. 局部組件注冊

我們也可以在 Vue 實例選項中注冊局部組件，這樣組件只能在這個實例中使用。局部組件的注冊利用 Vue 實例的 components 對象屬性，以組件名作為 key 值，以屬性對象作為 value。由于局部組件只能在當前的 Vue 實例中使用，所以當我們設計的組件不需要在其他組件內復用時，可以設計為局部組件。

//注冊
components: {
  'MyComponentName': {
    template: '<div>Hello ！</div>'
  }
}
......
// 使用
<my-component-name></my-component-name>
// 也可以使用自閉和的方式
<my-component-name />

具體示例如下：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component></my-component>
    <my-component /> 
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    components: {
    	'myComponent': {
        template: '<div>Hello ！</div>'
      }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
JS 代碼第 5-9 行，我們在當前實例上注冊了一個局部組件 myComponent，并在 html 內使用兩種方式引用了該組件。

4. 組件中的屬性參數

在之前章節我們學習了 Vue 實例，其實，所有的 Vue 組件也都是 Vue 的實例，他們也可以接收同樣的屬性參數，并且有相同的生命周期鉤子。
示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component></my-component>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div><div>{{ count }}</div><button @click="add">添加次數</button></div>',
    data() {
      return {
        count: 10
      }
    },
    methods: {
      add() {
        this.count = this.count + 1;
      }
    },
    created() {
      console.log('組件myComponent：created')
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
JS 代碼第 3-18 行，注冊了一個全局組件 myComponent，并定義了 data 數據、 methods 方法、created 生命周期函數。

5. 組件的復用

你可以將組件進行任意次數的復用，他們之間相互獨立，互不影響：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div><div>{{ count }}</div><button @click="add">添加次數</button></div>',
    data() {
      return{
        count: 10
      }
    },
    methods: {
      add() {
        this.count = this.count + 1;
      }
    },
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
html 代碼第 2-4 行，我們來使用三次組件 myComponent。他們之間是相互獨立的，當點擊按鈕時，每個組件都會各自獨立維護它的 count。因為我們每使用一次組件，就會有一個它的新實例被創建。

5.1 組件中的 data 必須是一個函數

當我們定義這個 <myComponent> 組件時，你可能會發現它的 data 并不是像這樣直接提供一個對象：

data: {
  count: 0
}

這是因為，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：

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

6. 小結

在本小節，我們學習了在項目中如何使用組件式開發，主要有以下知識點：

  • 通過 Vue.component () 注冊和使用全局組件。
  • 通過 Vue 實例上的 components 屬性注冊和使用局部組件。
  • 介紹了組件中的屬性參數。