最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

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

1. 前言

本節(jié)我們將介紹如何使用組件（Component），組件是 Vue.js 最強(qiáng)大的功能之一，組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)：
圖片描述
如何規(guī)劃和設(shè)計(jì)組件是學(xué)習(xí)組件的難點(diǎn)，在編寫(xiě)組件時(shí)，我們需要不斷思考如何提高組件的可復(fù)用性。

2. 慕課解釋

組件是可復(fù)用的 Vue 實(shí)例，且?guī)в幸粋€(gè)名字。 —— 官方定義

組件是可復(fù)用的 Vue 實(shí)例， 我們可以把頁(yè)面中在多個(gè)場(chǎng)景中重復(fù)使用的部分，抽出為一個(gè)組件進(jìn)行復(fù)用。組件大大提高了代碼的復(fù)用率。

3. 組件的注冊(cè)

3.1. 全局組件注冊(cè)

我們可以通過(guò)調(diào)用 Vue.component 的方式來(lái)定義全局組件，它接收兩個(gè)參數(shù)：1. 組件名，2. 組件屬性對(duì)象。

命名：

  • 短橫線：<my-component-name>
  • 駝峰式：<MyComponentName> 使用駝峰命名組件時(shí)，首字母最好以大寫(xiě)字母開(kāi)頭。

屬性對(duì)象：組件的屬性對(duì)象即為 Vue 的實(shí)例對(duì)象屬性。

全局組件可以在任何其他組件內(nèi)使用，所以當(dāng)我們?cè)O(shè)計(jì)的組件，需要在不同地方使用的時(shí)候，我們應(yīng)當(dāng)注冊(cè)全局組件。

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

具體示例如下：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

3.1. 局部組件注冊(cè)

我們也可以在 Vue 實(shí)例選項(xiàng)中注冊(cè)局部組件，這樣組件只能在這個(gè)實(shí)例中使用。局部組件的注冊(cè)利用 Vue 實(shí)例的 components 對(duì)象屬性，以組件名作為 key 值，以屬性對(duì)象作為 value。由于局部組件只能在當(dāng)前的 Vue 實(shí)例中使用，所以當(dāng)我們?cè)O(shè)計(jì)的組件不需要在其他組件內(nèi)復(fù)用時(shí)，可以設(shè)計(jì)為局部組件。

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

具體示例如下：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 5-9 行，我們?cè)诋?dāng)前實(shí)例上注冊(cè)了一個(gè)局部組件 myComponent，并在 html 內(nèi)使用兩種方式引用了該組件。

4. 組件中的屬性參數(shù)

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

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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">添加次數(shù)</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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

5. 組件的復(fù)用

你可以將組件進(jìn)行任意次數(shù)的復(fù)用，他們之間相互獨(dú)立，互不影響：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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">添加次數(shù)</button></div>',
    data() {
      return{
        count: 10
      }
    },
    methods: {
      add() {
        this.count = this.count + 1;
      }
    },
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
html 代碼第 2-4 行，我們來(lái)使用三次組件 myComponent。他們之間是相互獨(dú)立的，當(dāng)點(diǎn)擊按鈕時(shí)，每個(gè)組件都會(huì)各自獨(dú)立維護(hù)它的 count。因?yàn)槲覀兠渴褂靡淮谓M件，就會(huì)有一個(gè)它的新實(shí)例被創(chuàng)建。

5.1 組件中的 data 必須是一個(gè)函數(shù)

當(dāng)我們定義這個(gè) <myComponent> 組件時(shí)，你可能會(huì)發(fā)現(xiàn)它的 data 并不是像這樣直接提供一個(gè)對(duì)象：

data: {
  count: 0
}

這是因?yàn)?，一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝：

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

6. 小結(jié)

在本小節(jié)，我們學(xué)習(xí)了在項(xiàng)目中如何使用組件式開(kāi)發(fā)，主要有以下知識(shí)點(diǎn)：

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