Vue元件化開發（第四天（2.元件））
阿新 • • 發佈：2018-12-19
Vue 元件化開發
- 為了好維護管理和程式碼的複用，提高開發效率便於協同開發
- 分類 頁面級元件：
- 一個頁面是一個元件
- 將可複用的部分抽離出來
- 一個自定義標籤Vue就會把他看成一個嘴賤 div p span a header …可以給這些標籤賦予一定的意義
全域性元件
//html 元件名不要用大寫，多個單詞用’-‘連線（首字母可以大寫） <my-handsome></my-handsome> //vue Vue.componnent('my-handsome',{ template:'<div>{{msg}}</div>' data(){ return {msg:'111'} } })
區域性元件
- 先建立元件，隨用註冊元件，最後，使用元件。
- 元件是相互獨立的 不能直接跨作用域 例項也是一個元件，元件中擁有生命週期函式
- 如果元件共用了資料 會導致同時更新
- 子元件不能直接使用父元件的資料
- 元件理論上可以無限巢狀
let handsome = {template:'<div>111</div>'}
let vm = new Vue({
el：’#app‘，
components:{
handsome
}，
methods:{
fn(){
t
}
}
})
元件的屬性傳遞
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="#app"> <child :m="money"></child> </div> </body> <script></script> <script> let vm = new Vue({ el:'app', data:{money:200}, components:{ child:{ props:{//屬性名和data中的名字不能相同 m:{ type:[],//校驗屬性的型別，如果不帶‘：’得到的肯定是字串型別 ：m='1' :m="true" // default:0,//可以給m賦值預設值，如果不傳預設值會呼叫default required:true,//此屬性是必循傳遞的，但是不能和defauld同用 validator(val){//第一個引數是當前傳遞的值，返回true表示通過false就是不通過 return val>300//自定義校驗器 } }, template:'<div>兒子{{m}}</div>' }, } } }) </script> </html>