第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

1. 前言

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

2. 慕課解釋

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

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

3. 組件的注冊

3.1. 全局組件注冊

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

命名：

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

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

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

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

具體示例如下：

實例演示
預(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 行，我們注冊了一個全局組件 myComponent，并在 html 內(nèi)使用兩種方式引用了該組件。

3.1. 局部組件注冊

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

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

具體示例如下：

實例演示
預(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 行，我們在當(dāng)前實例上注冊了一個局部組件 myComponent，并在 html 內(nèi)使用兩種方式引用了該組件。

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

在之前章節(jié)我們學(xué)習(xí)了 Vue 實例，其實，所有的 Vue 組件也都是 Vue 的實例，他們也可以接收同樣的屬性參數(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 行，注冊了一個全局組件 myComponent，并定義了 data 數(shù)據(jù)、 methods 方法、created 生命周期函數(shù)。

5. 組件的復(fù)用

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

實例演示
預(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 行，我們來使用三次組件 myComponent。他們之間是相互獨(dú)立的，當(dāng)點(diǎn)擊按鈕時，每個組件都會各自獨(dú)立維護(hù)它的 count。因為我們每使用一次組件，就會有一個它的新實例被創(chuàng)建。

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

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

data: {
  count: 0
}

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

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

6. 小結(jié)

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

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