Vue組件的應用：

1、基礎使用：第一步創建組件，第二步注冊組件，第三步使用組件。在注冊組件是需要用到template的屬性。

全局組件和局部組件

組件的嵌套(父子組件)：注意先后順序，先聲明，后面才能用

2、組件的語法糖：直接在聲明的時候直接進行組件的構造，省去了extend()的步驟

// 2、注冊組件

Vue.component('cpn1', {

template: `

`

})

組件分離寫法：通過id來定位使用哪個組件

3、組件中數據存放的問題：組件里面不可以訪問Vue實例中的Data數據，但組件(也可以有methods)中可以有自己的Data，不過此Data必須是一個函數，返回一對象：

組件中data為什么一定是函數：如果不是函數，可能造成數據在多次引用的時候，會出現相互影響的錯誤，所以要用函數來返回數據，這樣每次引用組件的時候，新生成一個對象，每個對象保存自己的狀態值。如下圖的例子，引用了兩次組件，但是修改一個組件的值時，并不會影響到另外一個所引用組件的值。

4、父組件向子組件傳遞數據用：props，在傳數據時一定要用動態綁定的屬性v-bind 或 糖語法 ： 冒號

props的數據驗證：

5、子組件向父組件傳遞數據：用自定義事件$emit()

子組件定義事件

父組件通過v-on監聽子組件事件

6、小結：

總結

以上是生活随笔為你收集整理的angularjs1访问子组件_Vue学习笔记之组件的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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