vuedraggable vue2 0 元件詳解

2022-05-01 15:45:20 字數 1733 閱讀 5078

github位址

yarn add vuedraggable

npm i -s vuedraggable

通常
}

import draggable from 'vuedraggable'

...export default ,

...

使用過渡transition-group
}

使用footer slot
}

add

使用header slot
}

add

使用vuex
computed: ,

set(value) }}

value
型別:陣列,

必需:否,

預設值:null

通常與內部元素v-for指令引用的陣列相同,該元件的首先使用方法,與vuex相容,也可使用v-model

list
型別:陣列,

必需:否,

預設值:null

除了上面的 value prop之外,list是乙個要與拖放同步的陣列。

主要的區別是list prop是由使用splice方法的draggable元件更新的,而value是不可變的,兩者不能一起使用

tag
型別:字串

預設值:div

可拖動元件建立的元素的html節點型別,作為包含插槽的外部元素

還可以將vue元件的名稱作為元素傳遞。在本例中,draggable屬性將傳遞給建立的元件

clone
型別:function

預設值:(original) =>

當轉殖選項為真時,呼叫源元件上的函式來轉殖元素。

惟一的引數是要轉殖的viewmodel元素,返回的值是它的轉殖版本。

在預設情況下vue.draggable重用viewmodel元素,所以如果您想轉殖或深度轉殖它,就必須使用這個鉤子。

move
型別:函式

如果不為空,這個函式將以類似於sortable onmove**的方式呼叫。返回false將取消拖動操作

function onmovecallback(evt, originalevent)

checkmove: function(evt)

componentdata

型別:object

該props是用於傳遞額外的資訊到子元件

props:要在子元件中傳遞的props

attrs:要在子元件中傳遞的attrs

on:要在子元件中訂閱的事件

}methods: ,

inputchanged(value) ,

getcomponentdata() ,

attrs:,

props: };}

}

包括start, add, remove, update, end, choose, sort, filter, clone這些事件

當list不為空且相應陣列由於拖放操作而更改時,將觸發事件

引數屬性:

原始碼分析待續。。。

vue 2 0 元件 父子元件通訊

示例 輸入框 通過this.emit input value 將將使用者的之輸出到v model繫結的值 randomid v bind value value v on input oninput 複製 export default data function methods 複製 msg 複製 ...

Vuejs2 0 元件通訊總結

父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 parent child child msg msg child 最好用 代替駝峰,不區分大小寫 parent data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props ...

vue2 0元件傳值

props down emit up 嘿嘿 如果是第一次接觸vue2.0元件傳值的肯定很疑惑,這是什麼意思 大神總結的,我也就是拿來用用 down 指的是下的意思,即父元件向子元件傳值,用props up 指的是上的意思,即子元件想父元件傳值,用emit。1.子元件向父元件的傳值 child.vue...