溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Vue.js中組件怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
一、基本用法
在使用 vue-cli 創建的項目中，組件的創建非常方便，只需要新建一個 .vue 文件，然后在 <template> 中寫好 HTML 代碼，一個簡單的組件就完成了
一個完整的組件，除了 <template> 以外，還有 <script> 和 <style>
需要注意的是，<script> 中的 data 必須是函數
然后在其他文件的 js 里面引入并注冊，就能直接使用這個組件了
二、使用 slot 分發內容
開發過程中，常常需要在子組件內添加新的內容，這時候可以在子組件內部留一個或者多個插口 <slot>
然后在調用這個子組件的時候加入內容
添加的內容就會分發到對應的 <slot> 中
<slot> 中還可以作為一個作用域，在子組件中定義變量，然后在父組件中自定義渲染的方式
這個示例中，首先在子組件中添加 <slot>，并在子組件中定義了數組變量 navs
然后在父組件中以作用域 <template> 添加內容，其中 scope 是固有元素，它的值對應一個臨時變量 props
而 props 將接收子組件中，所有綁定的屬性（如 text）
三、動態組件
Vue 還可以將多個子組件，都掛載在同一個位置，通過變量來切換組件，實現 tab 菜單這樣的效果
這樣的功能可以通過路由 vue-router 實現，但路由更適合較大的組件，而且 url 會有相應的改變
Vue 自身保留的 <component> 元素，可以將組件動態綁定到 is 特性上，從而很方便的實現動態組件切換
上例中，當 tabView 的值改變，<component> 就會渲染對應的組件，和路由的效果十分類似，但是地址欄并沒有發生改變
但這樣一來，每次切換組件都會重新渲染，無法保留組件上的數據。這時可以使用 keep-alive 將組件保留在內存中，避免重新渲染
四、遞歸組件
當組件擁有 name 屬性的時候，就可以在它的模板內遞歸的調用自己，這在開發樹形組件的時候十分有效
上面是一個子組件，定義了 name 為 simple03，然后在模板中調用自身，結合 v-for 實現遞歸
為了防止出現死循環，在調用自身的時候，加入了 v-if 作為判定條件
父組件中調用的時候，需要通過 props 傳入一個 tree：
最終渲染結果：
以上是“Vue.js中組件怎么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
