vue如何封裝乙個元件

2021-10-01 10:22:34 字數 1193 閱讀 9673

1.新增子元件

在工程src->components目錄下新建乙個資料夾用於存放元件。

我封裝了乙個樹元件,資料夾名稱為va-tree,裡面有乙個va-tree.vue檔案,寫了樹元件的具體內容,包括元件樣式、元件處理邏輯、元件模板等等

子元件中定義的props是父元件需要傳給子元件的資料,在子元件中props裡面定義名稱和型別

下圖中:

data是樹元件展示的資料,需要從父元件中獲取,在props裡面定義templates:array,然後再賦值給:data="templates",這樣樹元件就有資料了

2.處理父元件

上面所說的父元件傳給子元件的templates,在父元件中也需要定義。

如下圖:

在父元件中引用自元件並在components裡面定義,然後直接在templates裡面是用即可,裡面:templates="templates"即為傳給子元件的值

然後在需要使用元件的vue檔案中引用元件

3.子元件呼叫父元件

在子元件中如何呼叫父元件的方法,可以使用$emit呼叫,並傳遞引數進行修改

// 父元件

check(value) 

// 子元件

this.$emit('selectnodes', node)
4.關於父子元件之間的通訊還可以使用ref 通訊

具體使用方法為父元件裡面設定ref,然後通過$refs物件來獲取子元件的資料,再進行操作,這個方法有時候會報錯,不建議經常使用

如何實現乙個元件封裝

js前端元件的封裝方法 定義乙個類 類中增加乙個方法 body中定義乙個dom節點 指令碼中把dom節點和類定義結合起來 實現特定的元件功能 vue元件封裝 建立元件的模板,先把架子搭起來,寫寫樣式,考慮你的元件的基本邏輯 然後在引用得元件中 用import引入元件 通過component定義元件名...

vue封裝乙個彈框元件

這是乙個提示框和對話方塊,例 取消 div div class kz btn click took 確定 div div div div template script export default took function script style scoped kz cont kz cont ...

如何寫乙個Vue元件

寫的是以.vue結尾的單檔案元件的寫法,是基於webpack構建的專案。template 模板 js 邏輯 css 樣式 每個元件都有屬於自己的模板,js和樣式。如果將乙個頁面比喻成一間房子的話,元件就是房子裡的客廳 臥室 廚房 廁所。如果把廚房單獨拿出來的話,元件又可以是刀 油煙機.等等。就是說頁...