Vue 自定義元件

2021-10-07 11:43:34 字數 1054 閱讀 7322

我們還可以通過vue提供的方法來自定義指令。

vue提供了兩種指令註冊方式

vue.

directive

('指令名稱',)

;

new

vue(}}

);

在使用指令的時候,需要使用v-指令名稱的方式來呼叫,註冊的時候不需要。

指令的執行方式很簡單,它提供了一組指令生命週期鉤子函式,我們只需要在不同的生命週期鉤子函式中進行邏輯處理就可以了

不同的生命週期鉤子函式在呼叫的時候同時會接收到傳入的一些不同的引數

vue.

directive

('drag'

, = binding;

el._candrag = binding.value;

let x =0;

let y =0;

let isdown =

false

; el.

addeventlistener

('mousedown'

, e =>);

document.

addeventlistener

('mousemove'

, e =>

} el.style.left = l +

'px'

; el.style.top = t +

'px';}

}); document.

addeventlistener

('mouseup'

, e =>);

},componentupdated

(el, binding)})

;new

vue(})

;

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...

vue 元件自定義

基於iview的自定義table元件 一 業務要求 1.展示列表字段資訊.2.列表資料的增刪查改 與 匯出 3.列表的分頁功能 二 元件 實現 html ref table data arrlist columns currcolumns loading loading no data text 暫...