Vue元件化開發

標準、分治、重用、組合

命名：駝峰/短橫線，駝峰命名的只能在字串模板中使用駝峰式的元件，在普通的標籤模板中需要轉化為短橫線使用。

vue.component('元件名稱',)

vue.component('button-counter',
},template:'點選}次',
methods:}})

區域性元件只能在註冊他的父元件中使用

var buttoncounter = 
},template:'點選}次',
methods:
}})components:

父--->子方式

父元件子元件其他①

屬性props，元件內部通過props接收傳遞過來的值

props:['title','content']

②引用refs（dom操作）

this.$refs.hw.foo ='bar'

// data

foo:'foo'

③子元素children

this.$children[0].foo = 'dong'

子元素不保證順序，也不是響應式。陣列唯讀。

子--->父方式

父元件子元件

其他$emit(自定義事件,攜帶引數)

擴大字型大小

觀察者模式

非父子元件

1任意兩個元件

事件中心（事件匯流排）或vuex

2兄弟元件

通過$parent共同的父元件進行傳遞

祖先--->後代

祖先後代

provide/inject

// 和data同級

provide:

// 和data同級

inject:['foo']

用於高階外掛程式/元件庫開發，不推薦直接用於應用程式**。

created->mounted：父元件先於子元件載入。

1️⃣屬性props

props：使用駝峰形式，模板中使用短橫線形式；字串形式的模板中沒有限制。

props：['menutitle']-------------menu-title

// 子元件
vue.component('menu-item',
},template:'}
',})

data:

2️⃣引用refs

應用場景：dom操作

this.$refs.hw.foo ='bar'

// data foo:'foo'

3️⃣子元素children

this.$children[0].foo = 'dong'

注：子元素不保證順序，也不是響應式。陣列唯讀。

props傳遞資料原則：單向資料流，只允許父元件向子元件傳遞資料，不允許子元件直接運算元據

觀察者模式：子元件派發，父元件監聽。事件真正的監聽者是子元件（誰派發誰監聽）。

// 子元件
vue.component('menu-item',)

// 父元件中
data:
// 子元件傳遞引數val=5
methods:
}

1️⃣任意元件

事件中心（事件匯流排）或vuex

var eventhub = new vue();

// 'add-todo'事件名稱，addtodo事件函式
mounted:function()
eventhub.$off('add-todo')

eventhub.$on('add-todo',(val)=>)

handle:function()

// main.js
vue.prototype.$bus = new vue()
// child1
this.$bus.$on('foo',handle)
// child2
this.$bus.$emit('foo')

2️⃣兄弟元件

通過$parent共同的父元件進行傳遞

由於巢狀層數過多，傳遞props不切實際，可以使用provide/inject

單向傳值：祖先->後代

// 祖先
provide()
}//後代
inject:['foo']

// template

// 和data同級
provide:
// 傳動態的值
provide()
}data()
}

// 和data同級
inject:['foo']

分類

子元件父元件（插槽內容）

匿名插槽

預設內容

有bug發生

具名插槽

作用域插槽}}

父元件向子元件傳遞內容

// 子元件預留乙個插槽位置slot
vue.component('error-box',)

有bug發生

根據名稱匹配，沒有匹配到的放到預設中。

v-slot2.6.0引入slot被官方廢棄。

主要內容1 主要內容2 底部內容主要內容1 主要內容2 底部內容1 底部內容2

應用場景：父元件獲取子元件的內容並進行加工處理

2.6.0以後slot-scope廢棄，使用v-slot。

// 子元件插槽定義 提供slot位置，繫結屬性item
vue.component('fruit-list',}
`})

}}

date:,]
}

Vue元件化開發

1 模組化模組化開發是從邏輯角度來劃分的。2 元件化是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...

Vue元件化開發

前言 1 全域性元件註冊語法 vue.comonent 元件名稱，2 元件的用法 3 元件註冊注意事項 4 元件的命名方式 vue.component my component vue.component mycomponent 5 區域性元件註冊 var componenta var compon...

Vue元件化開發

1.建立元件構造器 2.註冊元件 3.使用元件 cpn div 1.建立元件構造器物件 const cpnc vue.extend 2.註冊元件標籤名，元件構造器 vue.component cpn cpnc newvue script 各步驟的含義 1.vue.extend 2.vue.comp...

Vue元件化開發

Vue元件化開發

Vue元件化開發

Vue元件化開發

相關推薦