說明

組件（Component）是 Vue.js 最強大的功能之一，組件可以擴展 HTML 元素，封裝可重用的代碼，組件系統讓我們可以用獨立可復用的小組件來構建大型應用。

定義方法

這是官網給出的一種定義組件的方法

一下是我目前使用的方法，以下內容都是按照此方法定義組件的。（因為這樣可以使模板和組件分開）

定義組件前首先要定義一個模板，這是定義模板的一種方式

這是定義模板的另一種方式

接下來定義組件

這裏有幾個註意事項：

1.定義模板時，模板裏只能有一個頂層標簽。

2.定義組件時，不能使用H5標簽。

3.模板和組件之間用id相關聯。

4.組件的數據data是個函數。

5.組件的數據在自己的模板裏使用。

定義好模板和組件時，我們要使用組件，首先要在父組件中註冊這個組件，firsttemp就是我註冊的組件，然後在父組件的模板中以標簽的形式調用。

對以上內容做個小總結：

每個組件都有自己的模板，組件和模板之間用id相關聯，每個組件下面的數據只能在自己的模板中使用，如果使用這個組件，需要把它註冊在一個父組件下，在父組件的模板中以標簽的形式調用。

組件的生命周期（鉤子函數）

生命周期：組件本省是不存在，是人為創建的，這種從無到有到銷毀的過程叫生命周期。

三個步驟六個過程

Created 創造 beforeCreated created

Mounted 加載

Destroy 銷毀 beforeDestroy destroyed

數據交互

GET

這裏有一個this指向的問題，這是一種解決方式，用變量儲存this

這是第二種解決方式

get傳參

POST

大家會發現，數據出不來，因為這個作者他忽略了所有後臺的傳參的本質是字符串，

get是通過url中的query對象來傳，而post是通過協議中的一個body屬性來傳，但是不管是什麽方式，本質都是字符串。

強制將參數變成字符串

以上就是axios的get和post數據交互。

嵌套組件

只要在父組件中用標簽的形式調用子組件就可以了。

組件通信

第一種是父組件向子組件傳數據

每一個組件都有一個props屬性，這是該組件的組件標簽上的所有屬性構成的集合。

父組件和子組件之間靠子組件標簽取得聯系，在子組件標簽上的屬性可以在子組件的props屬性接受到。

第二種是子組件向父組件傳遞數據

這裏有一個refs屬性，是在組件模板下，所有子組件標簽構成的集合。

如果父組件想要獲得子組件的信息。

第一步：

給子組件添加ref屬性。

第二步：

在父組件下使用this.$refs 就可以看到子組件標簽的所有信息。

自定義事件

除了默認設置的核心指令( v-model 和 v-show ), Vue 也允許註冊自定義指令。

在子組件下定義一個事件，用於自定義事件，我們用到的是this.$emit

首先我們在子組件上綁定了一個click事件,這裏用到的this.$emit有兩個參數，第一個參數是自定義事件名，第二個參數是想要傳遞的數據。

然後我們在子組件標簽上用v-on 或者 @ 來接收自定義的文件

接下來我們在父組件上寫下事件的方法

這裏的參數res就是接收到的數據。

vue組件相關內容