本期在設置中使用了props,父子組件與props通信,emit等。請檢查所有源代碼。
在render函數中,可以通過這個訪問setup返回的內容,也可以訪問這個。$el等等。
因為是測試dom,jest需要提前註入以下內容,這樣文檔中就有了app節點。下面的測試用例類似於在html中定義壹個app節點。
該功能的測試用例正式開始。
上面的測試用例
解決這兩個需求:
鑒於以上分析,需要在setupStatefulComponent中創建壹個代理,並綁定到實例中,而如果setup的執行結果是壹個對象,那麽它已經存在於實例中,可以通過instance.setupState獲取。
通過上面的操作,在render中從this.xxx獲取setup返回的對象內容,然後處理el就可以了。
創建vnode時,需要綁定mountelement中的,El,判斷setupStatefulComponent中代理對象的當前key。
看似沒問題,其實是有問題的。請仔細考慮mountElement是否在setupStatefulComponent之後執行。執行setupStatefulComponent時,vnode.el不存在,稍後執行mountelement時,vnode會有壹個值。那麽上面的測試用例壹定是錯誤的,並且$el為null。
解決這個問題的關鍵是mountElement的加載順序是render->;補丁->;MountElement,render函數返回的子樹是壹個vnode。當上面的in vnode被掛載時,el已經被賦值,所以下壹個操作是在補丁之後執行的。
在vue中,可以使用onEvent寫事件,那麽這個功能是如何實現的呢?讓我們來看看。
在該功能的測試用例中,可以分析以下內容:
解決問題:
這個功能比較簡單。在處理prop的時候做壹個判斷,看屬性是否符合/on [a-z]/i的格式,如果是這種格式,事件會被註冊,但是vue3會做事件緩存。如何做到這壹點?
緩存也很容易實現。添加屬性el。_ vei || (El。_ vei = {})到輸入電流El,並且它將被直接使用。如果它不存在,它將被創建並存儲在緩存中。
事件處理還可以。
父子組件通信在vue中很常見,主要實現props和emit。
根據以上測試案例,分析道具的以下內容:
解決問題:
問題1:如果要在壹個子組件的設置函數中使用props作為第壹個參數,那麽在調用設置函數時,可以將當前組件的props傳入設置函數中。問題2:如果在渲染中需要壹個問題,那麽在上面的代理中,添加壹個判斷。鑰匙在當前實例的道具裏嗎?問題3:修改錯誤,即只能讀取。您可以使用先前實現的api shallowReadonly來包裝它。
完成後,我們可以發現我們的測試用例運行沒有問題。
道具是上面實現的,所以emit是必不可少的,那麽接下來我們來實現emit。
根據以上測試案例,我們可以分析:
解決方法:問題1: emit是setup的第二個參數,調用setup函數時可以傳入第二個參數。問題2:關於emit的第壹個參數,可以做條件判斷,把xxx-xxx的形式改成xxxXxx的形式,然後加上,最後在道具裏找。如果存在,就會被調用。如果不存在,就不會調用問題3的第二個參數:emit。
這是圓滿的成功!