在寫 vue 元件的時候，如何能保證其中巢狀的子元件符合我們的預期？
例如封裝乙個切換 tab 的元件，分為兩個部分：外容器 tabs 和 單元件 tab，那麼如何保證使用者在使用過程中， tabs 裡面包裹的使我們想要的 tab 元件，而不是其他例如 div 標籤等？
如下圖，新建乙個頁面，引入 tabs 和 tab 元件：
那我們如何知道 tabs 裡面的子元素型別？
首先我們在 tabs 原始檔中，我們可以拿到 tabs 的 slots 內容，也是就引用時的子元素內容
將 slots 的內容列印出來：
這裡面有乙個極為重要的 default 函式，我們將他的執行結果列印出來：
列印結果是乙個長度為三的陣列，並且陣列第一項的 type 為 div，那麼這個陣列是否就是 tabs 中的子元素呢？
我們在 tabs 原始檔中引入 tab，比較一下陣列中後面兩個元素的 type 是否是 tab：
列印結果：
現在我們可以得出結論：
在 vue3 中可以通過 context.slots.default() 得到元件中的子元素，如果要檢驗子元素的型別，只需要在拿到 default 返回的列表之後進行遍歷就可以啦：
vue3 子元件動態接受父元件的傳值
最近邊學vue邊做專案demo，也是苦，一路磕磕碰碰，遇到很多值得學習的問題都沒來得及整理。忙裡偷閒悄悄記一筆先，我怕回頭看又得琢磨 今天研究的是如何父元件動態改變子元件的props屬性內容，子元件要監聽到變化並作出回應。功能描述 乙個圖 一張表 按鈕控制 實現 點選資料行或者按鈕，圖形跟著變化 直...
在Vue2與Vue3中構建相同的元件
對於大多數元件，vue2和vue3中的 即使不完全相同，也是非常相似的。但是，vue3支援fragments，這意味著元件可以具有多個根節點。在渲染列表中的元件以刪除不必要的包裝div元素時，這特別有用。但是，在這種情況下，我們將為兩個版本的form元件保留乙個根節點。vue2 submit val...
vue3 元件的v model實現
在vue2中，v model val 是 value val 和 input val event.target.value 的語法糖 vue2的自定義元件的v model input元件 父元件 子元件 特殊的元件，比如checkbox元件，通過model屬性指定prop引數和event事件 父元件...