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

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

全局組件和局部組件

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

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

// 2、注冊(cè)組件

Vue.component('cpn1', {

template: `

`

})

組件分離寫(xiě)法：通過(guò)id來(lái)定位使用哪個(gè)組件

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

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

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

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

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

子組件定義事件

父組件通過(guò)v-on監(jiān)聽(tīng)子組件事件

6、小結(jié)：

總結(jié)

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

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