angularjs1访问子组件_Vue学习笔记之组件的应用
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vue数组变化视图_vue对象数组数据变
- 下一篇: 文件上传 java 完美,vue+jav