【Vue.js 牛刀小試】：第八章 - 組件的基礎知識

時間 2019-11-07

原文原文鏈接

系列目錄地址

前言

在以前的學習中，咱們對於 Vue 的一些基礎語法進行了簡單的瞭解，經過以前的代碼能夠清晰的看出，咱們在使用 Vue 的整個過程，最終都是在對 Vue 實例進行的一系列操做。html

這裏就會引出一個問題，就像咱們剛開始學習 C# 的時候把所有的代碼一股腦的寫到 Main 方法中，如今咱們把全部對於 Vue 實例的操做所有寫在一塊，這必然會致使這個方法又長又很差理解。前端

在 C# 的學習過程當中，隨着不斷學習，咱們開始將一些類似的業務邏輯進行封裝，重用一些代碼，從而達到簡化的目的。那麼，如何在 Vue 中如何實現類似的功能呢？這裏就須要提到組件這一律唸了，本章，咱們就來學習 Vue 中組件的基礎知識。vue

倉儲地址：Chapter02-Bronze Component Conceptgit

乾貨合集

1、組件是什麼程序員

組件是 Vue 中的一個重要概念，它是一種抽象，是一個能夠複用的 Vue 實例，它擁有獨一無二的組件名稱，它能夠擴展咱們的 HTML 元素，以組件名稱的方式做爲咱們自定義的 HTML 標籤。由於組件是可複用的 Vue 實例，因此它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。github

例如，在一個系統的絕大多數的網頁中，網頁都包含 header、menu、body、footer 等等部分，在不少時候，同一個系統中的多個頁面，可能僅僅是頁面中 body 部分顯示的內容不一樣，所以，咱們就能夠將系統中重複出現的頁面元素設計成一個個的組件，當咱們須要使用到的時候，引用這個組件便可。編程

不過，與咱們在寫 C# 時對代碼進行模塊化的劃分不一樣，模塊化主要是爲了實現每一個模塊、方法的職能單一，咱們通常是經過代碼邏輯的角度進行劃分；而 Vue 中的組件化，更多的是爲了實現對於前端 UI 組件的重用。

在 Vue 中建立一個新的組件以後，爲了能在模板中使用，這些組件必須先進行註冊以便 Vue 可以識別。在 Vue 中有兩種組件的註冊類型：全局註冊和局部註冊。segmentfault

全局註冊的組件能夠用在其被註冊以後的任何 (經過 new Vue) 新建立的 Vue 根實例，也包括其組件樹中的全部子組件的模板中使用；而局部註冊的組件只能在當前註冊的 Vue 實例中進行使用。app

2、全局組件的建立方式模塊化

在 Vue 中建立全局組件，一般的作法是先使用 Vue.extend 方法構建模板對象，而後經過 Vue.component 方法來註冊咱們的組件，由於，組件最後會被解析成自定義的 HTML 代碼，所以，咱們能夠直接在 html 中經過組件名稱做爲標籤使用。

<div id="app">
    <com></com>
</div>

<script> //一、使用 Vue.extend 構建模板對象 var comElement = Vue.extend({ template: '<h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3>' }) //二、使用 Vue.component 註冊全局組件 Vue.component('com', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>
複製代碼

從控制檯中能夠看到，咱們自定義的組件已經被解析成了 HTML 元素。這裏，須要注意一個問題，當咱們採用 Camel 的方式命名咱們的組件時，在使用這個組件的時候，須要將大寫字母改爲小寫字母，同時，兩個字母之間須要使用 - 進行鏈接。

<div id="app">
    <my-com></my-com>
</div>

<script> //一、使用 Vue.extend 構建模板對象 var comElement = Vue.extend({ template: '<h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3>' }) //二、使用 Vue.component 註冊全局組件 Vue.component('myCom', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>
複製代碼

固然，咱們也能夠直接在 Vue.component 中以一種相似 C# 中的匿名對象的方式直接註冊全局組件。

<div id="app">
    <com2></com2>
    <com3></com3>
</div>

<script> Vue.component('com2', Vue.extend({ template: '<h3>這是直接使用 Vue.component 建立的組件，啊啊啊啊啊啊</h3>' })) Vue.component('com3', { template: '<h3>這是直接使用 Vue.component 建立的組件，啊啊啊啊啊啊</h3>' }) var vm = new Vue({ el: '#app', data: {} }); </script>
複製代碼

上面的示例中，只是在 template 屬性中定義了一個簡單的 html 代碼，在實際的使用中，template 屬性指向的模板內容可能包含不少的元素，而使用 Vue.extend 建立的模板必須有且只有一個根元素，所以，當須要建立具備複雜元素的模板時，你能夠在最外層再套一個 div。

<div id="app">
    <com></com>
</div>

<script> //一、使用 Vue.extend 構建模板對象 var comElement = Vue.extend({ template: '<h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3><h4>嗚嗚嗚嗚</h4>' }) //二、使用 Vue.component 註冊全局組件 Vue.component('com', comElement) var vm = new Vue({ el: '#app', data: {} }); </script>
複製代碼

當 template 屬性中包含不少的元素時，不能使用代碼提示仍是會顯得比較不方便，這時，咱們可使用 template 標籤來定義咱們的模板，經過 id 來肯定組件的模板信息。

<div id="app">
    <com></com>
</div>

<template id="tmpl">
    <div>
        <h3>這是使用 Vue.extend 建立的組件，啊啊啊啊啊啊</h3>
        <h4>嗚嗚嗚嗚</h4>
    </div>
</template>

<script> Vue.component('com', { template: '#tmpl' }) var vm = new Vue({ el: '#app', data: {} }); </script>
複製代碼

3、局部組件的建立方式

某些時候，咱們註冊的組件只想在一個 Vue 實例中使用，若是仍是使用全局註冊的方式註冊組件就顯得不太合適了，這時，咱們就可使用局部註冊的方式註冊組件。在 Vue 實例中，咱們能夠經過 components 屬性註冊僅在當前做用域下可用的組件。

<div id="app">
    <simple-com></simple-com>
</div>

<div id="app2">
    <simple-com></simple-com>
</div>

<template id="local">
    <h4>我是局部註冊的組件啊啊啊啊啊啊啊啊</h4>
</template>

<script> var vm = new Vue({ el: '#app', data: {} }); var vm2 = new Vue({ el: '#app2', data: {}, components: { 'simple-com': { template: '#local' } } }); </script>
複製代碼

能夠看到，在上面的例子中，局部註冊的組件只能在註冊的 vm2 實例中完成解析，當咱們在 vm 實例中引用這個組件時，是沒法正確解析這個自定義的組件元素的。

總結

在本章中，主要介紹了組件是什麼，以及如何經過全局/局部的方式註冊咱們的組件。在咱們使用組件的過程當中，很大的可能會接觸到兩個組件之間的數據交互，以及如何爲咱們的組件設定事件，在下一章中，咱們將進一步的學習 Vue 中的組件相關知識點。

參考

一、Vue.js——60分鐘組件快速入門（上篇）

二、認識Vue組件

三、Vue 2.0學習筆記：組件的使用

四、初學vue2.0-組件-文檔理解筆記v1.0

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712