vue的元件化開發（元件通訊，插槽，遞迴元件）

2021-10-02 02:39:50 字數 1682 閱讀 3164

1. vue元件的通訊：包括子通父，父通子，兄弟通訊，祖代與後代通訊，vuex全域性狀態管理。

1.1 父向子通訊：props屬性和refs屬性。

1.1.1 props屬性：

//在子元件中


props:


},age1:[number,string],   //存在多種型別。


}//在父元件中

1.1.2 refs屬性：



//通過this.$refs.childdom.*** 呼叫子元件的方法/變數。
1.2 子向父通訊：this.$emit(事件，值)。

//子元件中


this,$emit('send','這是子元件向父元件傳遞的資料');


//父元件中


sendhandle(val)
1.3 兄弟通訊：可以通過$parent，bus，$toot實現，原理就是：子元件a傳給父元件，父元件在傳遞給子元件b。

//兄弟元件a


this.$parent.on('send',(res)=>{});  //監聽當前例項的父元件由vm.$emit觸發的自定義事件


//兄弟元件b


this.$parent.emit('send','b向a傳遞的資料');  //向 當前例項的父元件自定義廣播事件和資料
1.4 祖先和後代元件之間的通訊：通過provide/inject（只能祖先傳遞給後代，不能逆向）。

//祖先元件


provide()


}//後代（後n代）


inject:['foo']   //獲取祖先元件傳遞過來的foo值。
拓展：1. 以前實現後代給祖先通訊的方式：原理就是：後代一層一層向父元件以及父元件的父元件.....傳遞自定義事件和值，直到找到根元件為止。

//後代元件中生成乙個方法dispatch


dispatch(eventname,val)else


}}//祖先元件中


this.$on(eventname,val);  //監聽後代元件廣播過來的自定義事件和資料
1.4 任意兩個元件通訊：兩個元件的關係包括父子，兄弟，祖先與後代等，可以通過vuex全域性狀態管理以及$bus實現。

1.4.1 $bus：中小型專案中。

import vue from "vue"


vue.prototype.$bus=new bus();


//在乙個任意元件中


this.$bus.$on(eventname,(res)=>{})


//在另乙個任意元件中


this.$bus.$emit(eventname,val);
1.4.2 vuex：複雜大型專案中。

2. vue元件插槽：slot標籤，包括匿名元件和具名元件。

//1. 寫法：


匿名元件


具名元件


//2.使用


匿名元件的使用


具名元件的使用
3. vue遞迴元件：即元件自己呼叫自己，必須滿足（有結束條件，且必須有name名，且首字母大寫）。

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...