Vue.js中的組件系統(tǒng)

更新時間：2019年05月30日 08:30:17 作者：子瑜說IT

這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

vue.js既然是框架，那就不能只是簡單的完成數(shù)據(jù)模板引擎的任務，它還提供了頁面布局的功能。本文詳細介紹使用vue.js進行頁面布局的強大工具，vue.js組件系統(tǒng)。

Vue.js組件系統(tǒng)

每一個新技術(shù)的誕生，都是為了解決特定的問題。組件的出現(xiàn)就是為了解決頁面布局等等一系列問題。vue中的組件分為兩種，全局組件和局部組件。

組件的注冊

全局組件的注冊

通過Vue.component()創(chuàng)建一個全局組件之后，我們可以在一個通過 new Vue 創(chuàng)建的 Vue 根實例中，把這個組件作為自定義元素來使用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
</head>
<body>
 <div id="app">
 <!--第二步，使用-->
 <global_component></global_component>
 </div>
 <script>
 // 第一步，注冊
 Vue.component("global_component", {
  template: ` <div>
   <h2>Hello Vue</h2>
  </div>
 `
 }); new Vue({
  el: "#app",
 }); </script>
</body>
</html>

組件的參數(shù)

因為組件是可復用的 Vue 實例,所以它們與 new Vue 接收相同的選項，例如 data 、 computed 、 watch 、 methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
</head>
<body>
 <div id="app">
 <!--第二步，使用-->
 <global_component></global_component>
 </div>
 <script>
 // 第一步，注冊
 Vue.component("global_component", {
  data: function () { return {
   count: 0 }
  },
  template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
 }); new Vue({
  el: "#app",
 }); </script>
</body>
</html>

組件的復用

每個實例維護自己的一份獨立的數(shù)據(jù)。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
</head>
<body>
 <div id="app">
 <!--第二步，使用-->
 <global_component></global_component>
 <global_component></global_component>
 <global_component></global_component>
 </div>
 <script>
 // 第一步，注冊
 Vue.component("global_component", {
  data: function () { return {
   count: 0 }
  },
  template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
 }); new Vue({
  el: "#app",
 }); </script>
</body>
</html>

注意當點擊按鈕時，每個組件都會各自獨立維護它的 count 。因為你每用一次組件，就會有一個它的新實例被創(chuàng)建。

Data必須是一個函數(shù)

data必須是一個函數(shù)，因此每個實例可以維護一份被返回對象的獨立的拷貝, 也可以寫成如下形式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
</head>
<body>
 <div id="app">
 <!--第二步，使用-->
 <global_component></global_component>
 <global_component></global_component>
 <global_component></global_component>
 </div>
 <script>
 // 第一步，注冊
 Vue.component("global_component", {
  data(){ return {
   count: 0 }
  },
  template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
 }); new Vue({
  el: "#app",
 }); </script>
</body>
</html>

局部組件的注冊

全局注冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript 的無謂的增加。

全局組件始終是存在的，除非程序結(jié)束，如果組件越來越大，那么程序所占用的空間和消耗的性能就會更大。

所以我們需要局部組件。不用的時候，被垃圾回收。

局部組件的第一種使用方式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
</head>
<body>
 <div id="component-demo">
 <!--最后在根元素當中使用它-->
 <!--第一個中使用方式，會把當前div渲染進DOM-->
 <my-header></my-header>
 </div>
 <script>
 // 定義一個局部組件，其實就是一個變量，它是一個object類型
 // 屬性與全局組件是一樣的
 let Header = {
  template: ` <button @click="count++">{{ count }}</button>
 `,
  data() { return {
   count: 0 }
  }
 }; new Vue({
  el: "#component-demo", // 第二部，需要在根實例當中使用它
 components: { 'my-header': Header
  }
 }); </script>
</body>
</html>

局部組件的第二種使用方式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
</head>
<body>
 <div id="component-demo">
 </div>
 <script>
 // 定義一個局部組件，其實就是一個變量，它是一個object類型
 // 屬性與全局組件是一樣的
 let Header = {
  template: ` <button @click="count++">{{ count }}</button>
 `,
  data() { return {
   count: 0 }
  }
 }; new Vue({
  el: "#component-demo", // 第二種使用方式，不會將div渲染進DOM，以template為根元素
 template: `<my-header></my-header>`,
  // 第二步，需要在根實例當中使用它
 components: { 'my-header': Header
  }
 }); </script>
</body>
</html>

對于 components 對象中的每個屬性來說，其屬性名就是自定義元素的名字，其屬性值就是這個組件的選項對象。

在局部組件中使用子組件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
 <style> body { margin: 0;
 } .box { width: 100%; height: 50px; background-color: #2aabd2;
 }

 </style>
</head>
<body>
 <div id="component-demo">
 </div>
 <script>
 // 定義一個局部組件，其實就是一個變量，它是一個object類型
 // 這個對象的屬性與全局組件是一樣的(除el屬性外)
 let Fcontent = {
  template: ` <div>
   <span>這是頭條</span>

  </div>
 `
 };

 let Header = {
  template: ` <div v-bind:class='{box: isBox}'>
   <button @click="count++">{{ count }}</button>
   <first-content></first-content>
  </div>
 `,
  data() { return {
   count: 0,
   isBox: true }
  },
  components: { 'first-content': Fcontent
  }
 }; new Vue({
  el: "#component-demo", // 第二種使用方式，不會將div渲染進DOM，以template為根元素
 template: `<my-header></my-header>`,
  // 第二步，需要在根實例當中使用它
 components: { 'my-header': Header
  }
 }); </script>
</body>
</html>

注:

1.注意寫組件標簽

2.每個組件的template只識別一個作用域塊

通信

父子組件的通信

在父組件中給子組件綁定屬性,子組件通過props=["屬性名稱"]

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
 <style> body { margin: 0;
 } .box { width: 100%; height: 50px; background-color: #2aabd2;
 }

 </style>
</head>
<body>
 <div id="component-demo">
 </div>
 <script>
 // 定義一個局部組件，其實就是一個變量，它是一個object類型
 // 屬性與全局組件是一樣的
 let Fcontent = {
  template: ` <div>
   <span>這是頭條</span>
 {{ fdata }} </div>
 `,
  props: ['fdata']
 };

 let Header = {
  template: ` <div v-bind:class='{box: isBox}'>
   <button @click="count++">{{ count }}</button>
   <first-content :fdata="fathData"></first-content>
  </div>
 `,
  data() { return {
   count: 0,
   isBox: true,
   fathData: "我是你爸爸~~~" }
  },
  components: { 'first-content': Fcontent
  }
 }; new Vue({
  el: "#component-demo", // 第二種使用方式，不會將div渲染進DOM，以template為根元素
 template: `<my-header></my-header>`,
  // 第二步，需要在根實例當中使用它
 components: { 'my-header': Header
  }
 }); </script>
</body>
</html>

子父組件的通信

父組件在mounted的時候，監(jiān)聽一個自定義事件。

給子組件綁定一個click事件之后，通過內(nèi)建的方法$emit在父組件上觸發(fā)一個事件，這個時間就是父組件監(jiān)聽的自定義事件。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
 <style> body { margin: 0;
 } .box { width: 100%; height: 50px; background-color: #2aabd2;
 }

 </style>
</head>
<body>
 <div id="component-demo">
 </div>
 <script>
 // 定義一個局部組件，其實就是一個變量，它是一個object類型
 // 屬性與全局組件是一樣的
 let Fcontent = {
  template: ` <div>
   <button v-on:click="myClick">放大父組件字體</button>
  </div>
 `,
  methods: {
  myClick: function () {
   console.log(this); this.$emit('change-font', 0.1);
   console.log(this);
  }
  }
 };

 let Header = {
  template: ` <div v-bind:class='{box: isBox}'>
   <first-content v-on:change-font="changeFont"></first-content>
   <span :style="{ fontSize: postFontSize + 'em' }">Hello Vue</span>
  </div>
 `,
  data() { return {
   count: 0,
   isBox: true,
   fathData: "我是你爸爸~~~",
   postFontSize: 1 }
  },
  components: { 'first-content': Fcontent
  },
  methods: {
  changeFont: function (value) { this.postFontSize += value;
  }
  }
 };

 const VM = new Vue({
  el: "#component-demo", // 第二種使用方式，不會將div渲染進DOM，以template為根元素
 template: `<my-header></my-header>`,
  // 第二步，需要在根實例當中使用它
 components: { 'my-header': Header
  }
 }); </script>
</body>
</html>

非父子通信

其中一個組件向中間調(diào)度器提交事件,另一個組件監(jiān)聽中間調(diào)度器的事件

混入

混入可以提高代碼的重用性。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.js"></script>
</head>
<body>
 <div id="mixin-demo">
  <my-alex></my-alex>
  <p></p>
  <my-peiqi></my-peiqi>
 </div>

 <script> let mixs = {
   methods: {
    show: function (name) {
     console.log(`${name} is here!`);
    },
    hide: function (name) {
     console.log(`${name} is gone!`);
    },
   }
  };

  let myAlex = {
   template: ` <div>
      <button @click="show('alex')">點我顯示alex</button>
      <button @click="hide('alex')">點我隱藏alex</button>
     </div>
 `,
   mixins: [mixs],
  };

  let myPeiqi = {
   template: ` <div>
      <button @mouseenter="show('peiqi')">鼠標移入顯示沛齊</button>
      <button @mouseleave="hide('peiqi')">鼠標離開隱藏沛齊</button>
     </div>
 `,
   mixins: [mixs],
  }; new Vue({
   el: "#mixin-demo",
   components: { "my-alex": myAlex, "my-peiqi": myPeiqi,
   }
  }) </script>

</body>
</html>

插槽

有時候我們需要向組件傳遞一些數(shù)據(jù)，這時候可以使用插槽.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px;
  }

 </style>
 <script src="../statics/vue.js"></script>
</head>
<body>
 <div id="app01">
  <com-content>登錄</com-content>
  <com-content>注冊</com-content>
  <com-content>最熱</com-content>
  <com-content>段子</com-content>
  <com-content>42區(qū)</com-content>
  <com-content>圖片</com-content>
 </div>

 <script> Vue.component('com-content', {
   template: ` <div class="nav-link">
    <slot></slot>
   </div>
 `
  }); new Vue({
   el: "#app01",
  }) </script>

</body>
</html>

具名插槽

操作使用了組件的復用，如果我們在同一個組件內(nèi)寫入不同的頁面呢？此時，我們需要多個插槽，并且給不同的內(nèi)容命名。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px;
  }
 </style>
 <script src="../statics/vue.js"></script>
</head>
<body>
 <div id="app01">
  <base-layout>
   <template slot="header">
    <h1>這是標題欄</h1>
   </template>
   <template>
    <h2>這是內(nèi)容</h2>
   </template>
   <template slot="footer">
    <h3>這是頁腳</h3>
   </template>
  </base-layout>
 </div>

 <script> let baseLayout = {
   template: ` <div class="container">
     <header>
      <slot name="header"></slot>
     </header>
     <main><slot></slot></main>
     <footer>
      <slot name="footer"></slot>
     </footer>
    </div>
 `
  }; new Vue({
   el: "#app01",
   components: { "base-layout": baseLayout
   }

  }) </script>

</body>
</html>

我們還是可以保留一個未命名插槽，這個插槽是默認插槽，也就是說它會作為所有未匹配到插槽的內(nèi)容的統(tǒng)一出口。

在組件上使用v-model

自定義事件也可以用于創(chuàng)建支持 v-model 的自定義輸入組件。記?。?/p>

<input v-model="searchText">

等價于：

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >

當用在組件上時， v-model 則會這樣：

<custom-input v-bind:value="searchText" v-on:input="searchText = $event"
></custom-input>

為了讓它正常工作，這個組件內(nèi)的 <input> 必須：

將其 value 特性綁定到一個名叫 value 的 prop 上
在其 input 事件被觸發(fā)時，將新的值通過自定義的 input 事件拋出

寫成代碼之后是這樣的：

Vue.component('custom-input', {
 props: ['value'],
 template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)"
 > `
})

現(xiàn)在 v-model 就應該可以在這個組件上完美地工作起來了：

<custom-input v-model="searchText"></custom-input>

如下是在組件中使用v-model示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
</head>
<body>
 <div id="app">
 </div>

 <script> let Model = {
  template: ` <div>
   <input
    v-bind:value="value" v-on:input="$emit('input', $event.target.value)"
   />
   <h1>{{ value }}</h1>
 `,
  props: ['value']
 };

 let App = {
  template: ` <div>
   <custom-input v-model="searchText"></custom-input>
 `,
  components: { 'custom-input': Model,
  },
  data(){ return {
   searchText: "",
  }
  }
 }; new Vue({
  el: "#app",
  template: `<App></App>`,
 components: {
  App,
  }
 }) </script>
</body>
</html>

使用組件的注意事項

注意事項一：單個根元素

當構(gòu)建一個內(nèi)容頁面的組件時，我們的組件可能包含多個HTML標簽。

<h1>Hello World</h1>
<h2>Hello Vue</h2>

然而如果你在模板中嘗試這樣寫，Vue 會顯示一個錯誤，并解釋道 every component must have a single root element (每個組件必須只有一個根元素) 。你可以將模板的內(nèi)容包裹在一個父元素內(nèi)，來修復這個問題，例如：

<div>
 <h1>Hello World</h1>
 <h2>Hello Vue</h2>
</div>

注意事項二：解析特殊HTML元素

有些 HTML 元素，諸如 <ul> 、 <ol> 、 <table> 和 <select> ，對于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴格限制的。而有些元素，諸如 <li> 、 <tr> 和 <option> ，只能出現(xiàn)在其它某些特定的元素內(nèi)部。

這會導致我們使用這些有約束條件的元素時遇到一些問題。例如：

<table>
 <blog-post-row></blog-post-row>
</table>

這個自定義組件 <blog-post-row> 會被作為無效的內(nèi)容提升到外部，并導致最終渲染結(jié)果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法：

<table>
 <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我們從以下來源使用模板的話，這條限制是不存在的：

字符串 (例如：template: '...')
單文件組件 (.vue) <script type="text/x-template">

使用組件實現(xiàn)路飛導航欄

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../statics/vue.min.js"></script>
 <!-- 引入樣式 -->
 <link rel="stylesheet" >
 <!-- 引入組件庫 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <style> body { margin: 0; padding: 0;
  } .header { position: fixed; top: 0; left: 0; width: 100%;
  } .el-menu { display: flex; align-items: center; justify-content: center;
  } .footer { position: fixed; bottom: 0; left: 0; width: 100%;
  } .header img { position: absolute; left: 80px; top: -4px; width: 118px; height: 70px; z-index: 999;
  }

 </style>
</head>
<body>

 <div id="app">

 </div>

 <template id="header">
  <div class="header">
   <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>
   <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <el-menu-item index="1">首頁</el-menu-item>
    <el-menu-item index="2">免費課程</el-menu-item>
    <el-menu-item index="3">輕課</el-menu-item>
    <el-menu-item index="4">學位課程</el-menu-item>
    <el-menu-item index="5">智能題庫</el-menu-item>
    <el-menu-item index="6">公開課</el-menu-item>
    <el-menu-item index="7">內(nèi)部教材</el-menu-item>
    <el-menu-item index="8">老男孩教育</el-menu-item>
   </el-menu>
  </div>

 </template>

 <template id="footer">
  <div class="footer">

   <el-menu class="el-menu-demo" mode="horizontal" background-color="black">
    <el-menu-item index="1">關(guān)于我們</el-menu-item>
    <el-menu-item index="2">聯(lián)系我們</el-menu-item>
    <el-menu-item index="3">商業(yè)合作</el-menu-item>
    <el-menu-item index="4">幫助中心</el-menu-item>
    <el-menu-item index="5">意見反饋</el-menu-item>
    <el-menu-item index="6">新手指南</el-menu-item>
   </el-menu>

  </div>

 </template>

 <script> let pageHeader = {
   template: "#header",
   data() { return {
     activeIndex: "1",
    }
   }
  };

  let pageFooter = {
   template: "#footer",
  };

  let App = {
   template: ` <div>
     <div>
      <page-header></page-header>

     </div>
     <div>
      <page-footer></page-footer>
     </div>
    </div>
 `,
   components: { 'page-header': pageHeader, 'page-footer': pageFooter,
   }
  }; new Vue({
   el: "#app",
   template: `<app></app>`,
 components: { 'app': App,
   }
  }) </script>
</body>
</html>

效果圖: