點擊上方“藍字”，發現更多精彩。前言

又到了愉快的周末，今天下了一天的雨了，我又日常宅宿舍打游戲、刷劇、聽音樂寫寫代碼。

前面的基礎語法記錄完了，接下記錄的Vue的組件

01認識組件化什么是組件化？

• 如果我們將一個頁面中所有的處理邏輯全部放在一起，處理起來就會變得非常復雜，而且不利于后續的管理以及擴展。

• 但如果，我們將一個頁面拆分成一個個小的功能塊，每個功能塊完成屬于自己這部分獨立的功能，那么之后整個頁面的管理和維護就變得非常容易了。

Vue組件化思想:

組件化是Vue.js中的重要思想:

它提供了一種抽象，讓我們可以開發出一個個獨立可復用的小組件來構造我們的應用。

任何的應用都會被抽象成一顆組件樹

組件化思想的應用：

• 有了組件化的思想，我們在之后的開發中就要充分的利用它。

• 盡可能的將頁面拆分成一個個小的、可復用的組件。

• 這樣讓我們的代碼更加方便組織和管理，并且擴展性也更強。

02注冊組件1注冊組件的基本步驟

組件的使用分成三個步驟:

創建組件構造器 調用Vue.extend()方法創建組件構造器

注冊組件 調用Vue.component()方法注冊組件

使用組件。在Vue實例的作用范圍內使用組件

這樣看起來似乎不好體現優點，但如果內容多的時候，然后多個地方都使用這個組件就能體行出來了。

2注冊組件步驟解析

解釋一下上面的三個步驟的含義：

1、Vue.extend()：

• 調用Vue.extend()創建的是一個組件構造器。?

• 通常在創建組件構造器時，傳入template代表我們自定義組件的模板。

• 該模板就是在使用到組件的地方，要顯示的HTML代碼。

這種方法是最原始方法，現在很少見了? 我們一般使用語法糖

2.Vue.component()：

• 調用Vue.component()是將剛才的組件構造器注冊為一個組件，并且給它起一個組件的標簽名稱

• 所以需要傳遞兩個參數：1、注冊組件的標簽名 2、組件構造器

3.組件必須掛載在某個Vue實例下，否則它不會生效

• 我們使用了三次，而第三次其實并沒有生效

全局組件和局部組件1.當我們通過調用Vue.component()注冊組件時，注冊的組件是全局的，這意味著該組件可以在任意Vue實例下使用

2.如果我們注冊的組件是掛載在某個實例下的,那么就是一個局部組件

這里我將使用到另一個屬性components 與之前的methods那些同級

采用對象形式 鍵為組件的名字 值為構造器創建的模板

我們將組件cpn掛載在實例1中 那么其它實例就用不了，控制臺還會報錯：

注意 我們最常使用的是局部組件 而且一般只有一個Vue實例

父組件和子組件

我們在父組件中掛載了子組件的同時也使用了子組件標簽

其實Vue實例我們也可以把它當成一個根組件

語法糖注冊組件

上面注冊組件的方式，可能會有些繁瑣

Vue為了簡化這個過程，提供了語法糖形式

主要是省去了調用Vue.extend()的步驟，而是可以直接使用一個對象來代替。

全局組件注冊：

局部組件：

模板的分離寫法

剛才，我們通過語法糖簡化了Vue組件的注冊過程，另外還有一個地方的寫法比較麻煩，就是template模塊寫法。

如果我們能將其中的HTML分離出來寫，然后掛載到對應的組件上，結構會變得非常清晰。

Vue提供了兩種方案來定義HTML模塊內容：

使用標簽 注意要設置type和id

<div id="app"> <cpn>cpn> div> <script src="./vue.js">script> <script type="text/x-template" id="cpn"> <div> <h4>組件的內容h4> <h4>組件的內容h4> div>script> <script> const vue = new Vue({ el: '#app', components: { cpn: { template: '#cpn' } } });

使用標簽 要設置id屬性進行對應

<div id="app"> <cpn>cpn> div> <template id="cpn"> <div> <h4>組件的內容h4> <h4>組件的內容h4> div> template> <script src="./vue.js">script> <script> const vue = new Vue({ el: '#app', components: { cpn: { template: '#cpn' } } });

這篇先記錄到這，下篇記錄組件之間數據的訪問傳遞，有啥問題歡迎關注公眾號留言或添加微信私聊 感謝！

微信號：LinSB0315掃碼關注我們了解更多精彩

總結

以上是生活随笔為你收集整理的子组件调用父组件方法_Vuejs组件(一)组件的注册使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。