深入理解vue父子元件之從零開始Tree外掛程式

[toc]

tree樹形控制項在前端開發中必不可少，對於資料的展示現在**大都採取樹形展示。因為大資料全部展示出來對於使用者來說是不友好的。今天我們自己手寫乙個tree外掛程式。

同樣的我們先來看看他的用法其實和iview一樣。用我們封裝好的模板就行了。下面是做乙個部門樹。部門下面掛著人員這個功能。

那麼我們的zxhtree控制項是在**註冊的呢，這裡被我們抽離在component.js裡。vue.component('zxhtree', {});繼續在zxhtree裡看除繫結的節點是template: '#tree-template'。tree-template的模板是在component.html中寫好的

屬性含義

示例treekey

內部樹形展示

deptid

vistreekey

樹形展示key

deptid

ids預設顯示的資料

無names

預設顯示的資料

無treename

內部真是展示資料

deptname

vistreename

樹形展示資料

deptname

treechildren

當前樹的子節點資料

無model

當前樹的資料

無(m)keyname

用於接受返回的資料

無控制項接受資料處理邏輯

//接收到資料在外面套一層

if(this.model[this.treekey]==undefined)
if(this.model[this.treename]==undefined)
if (this.model.disabled == true) 
console.log('元件註冊了嗎');
if ((','+this.ids+',').indexof(','+this.model[this.treekey]+',') == -1) else 
if(this.ids!='')
if (this.names.indexof(",") == -1&&this.names!='') else}}

var newopt =,'name':{}};

newopt.key = object.assign(this.opt.key, opt.key);
newopt.name = object.assign(this.opt.name, opt.name);
var flag=false;
for(var index in this.model[this.treechildren])
}if(!flag)
for(var key in newopt)
this.opt=newopt;
this.$emit('keyname', newopt);

if(selected instanceof mouseevent)else

this.model.checkstatus=this.checkstatus;
if (this.model.expected != true) 
for(var index in this.$refs.child)
this.$emit('keyname', this.opt);

深入理解vue元件

當使用table select等標籤時，元件標籤化可能會有bug，此時應該使用 is 接受元件。在子元件定義data時，data必須是乙個函式，不能是乙個物件。在vue中如果要操作dom，需要使用 ref 引用，從而獲取dom節點。需求 定義乙個子元件，使其數字自加，在父元件中對子元件的數字求和。單...

Vue元件深入理解 插槽

插槽相當於佔位符，用表示 用於父元件填充子元件的資訊 在中間填充內容，則擋傳入的slot中不存在時，則會使用使用填好的內容。type submit submitslot button 父級元件模板不能編譯子元件的變數，因此需要值傳遞。插槽有點類似於父子元件傳值，但傳的不是值，而是傳進去復用的模板 實...

vue初學 3 深入理解vue元件

舉個例子比較能說明問題 1 vue.component row 如何解決？is語法 這樣就解決了這個問題了。vue.component counter data function methods 在兩個子元件用ref引用 接著在根元件中新增方法來處理資料 handlechange function ...