Uniapp中關於props的傳參問題

2021-10-07 17:11:59 字數 2746 閱讀 7969

例子如下



="uni-container"


>


"fatherdata"


:fatherfcuntion=


"fatherfcuntion"


:fathermethod=


"fathermethod"


>


<


/child>


<


/view>


<


/template>


import child from


'./child.vue'


export


default


,data()


}},				fatherfcuntion:


function()


,}},


methods:,}


}<


/script>


child


<


/view>


<


/template>


export


default(;


}},			fatherfunction:}}


,			fathermethod:}}


},mounted()


})<


/script>
initmixin


(vue)


;statemixin


(vue)


;eventsmixin


(vue)


;lifecyclemixin


(vue)


;rendermixin


(vue)


;
在initmixin(vue)中會執行

function


initmixin


(vue)};


}
_init方法中的$mount函式如下

// public mount method


vue.prototype.


$mount


=function


(    el ,


hydrating 


);
mountcomponent$1函式如下，會new watcher，函式為updatecomponent，函式updatecomponent會執行_update

function


mountcomponent$1


(  vm,


el,hydrating);


// we set this to vm._watcher inside the watcher's constructor


// since the watcher's initial patch may call $forceupdate (e.g. inside child


// component's mounted hook), which relies on vm._watcher being already defined


newwatcher


(vm, updatecomponent, noop,}}


,true


/* isrenderwatcher */);


hydrating =


false


;return vm


}
在lifecyclemixin函式內部會定義乙個_update屬性函式

vue.prototype.


_update


=function


(vnode, hydrating)


else


......


};
_update函式中有乙個__patch__函式，主要比較newdata與olddata的差異進行差量更新

var


patch


=function


(oldvnode, vnode)


catch


(err


)    data.__webviewid__ = mpinstance.data.__webviewid__;


var mpdata = object.


create


(null);


object.


keys


(data)


.foreach


(function


(key));


var diffdata =


this


.$shoulddiffdata ===


false


? data :


diff


(data, mpdata)


;...


.......}


;
上述有乙個clonewithdata方法，最後會返回深度轉殖的值，但是該方法會有問題，丟失value值為function的key，並且可能存在迴圈依賴問題。

function


clonewithdata


(vm)
上述可以看到，使用clonewithdata採用了json.parse(json.stringify(ret))，導致this中的data中會識別到物件如果包含function，會直接丟失到該屬性，並且diff演算法會識別到b:{}的差異，直接影響到子元件。

props寫法 Vue中props的用法知識點

vue中props的詳解 看一下官方文件 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。父元件的資料需要通過 prop 才能下發到子元件中。也就是props是子元件訪問父元件資料的唯一介面。詳細一點解釋就是 乙個元件可以直接在模板裡面渲染data裡面的資料 ...

props寫法 簡單理解vue中Props屬性

使用 props 傳遞資料 元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。prop 是元件資料的乙個字段，期望從父元件傳下來。子元件需要顯式地用 props 選項 宣告 props vue.component child...

vue中的props物件

1.props物件的定義 props其實是properties的縮寫，props物件是用來定義屬性的。props物件可以接受陣列形式的引數又或者是物件形式的引數。陣列形式 props title likes ispublished commentids author 物件形式 在物件形式中，可以指定...