Vue組件的應(yīng)用：

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

全局組件和局部組件

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

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

// 2、注冊組件

Vue.component('cpn1', {

template: `

`

})

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

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

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

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

props的數(shù)據(jù)驗證：

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

子組件定義事件

父組件通過v-on監(jiān)聽子組件事件

6、小結(jié)：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。