Vue.js（17）之 插槽
生活随笔
收集整理的這篇文章主要介紹了
Vue.js（17）之 插槽
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如何理解Vue的作用域插槽
?
定義插槽：在子組件作用域中，使用 <slot></slot> 定義一個插槽；
使用插槽：在父作用域中使用帶有插槽的組件時，組件內容區域中的內容，會插入到插槽中顯示；
注意：在一個組件的定義中，只允許出現一次匿名插槽
定義具名插槽：使用 name 屬性為 slot 插槽定義具體名稱；<slot name="header"></slot>
使用具名插槽：在父作用域中使用帶有命名插槽的組件時，需要為內容指定 slot="插槽name" 來填充到指定名稱的插槽；
?
頁面展示：
定義作用域插槽：在子組件中，使用 slot 定義插槽的時候，可以通過 屬性傳值 的形式，為插槽傳遞數據，例子：<slot text="hello world" :msg="sonMsg" row="rowData"></slot>
使用作用域插槽：在父作用域中，通過定義 slot-scope="scope" 屬性，接收并使用 插槽數據；
注意：同一組件中不同插槽的作用域，是獨立的！
頁面展示：
?
轉載于:https://www.cnblogs.com/houfee/p/10036249.html
總結
以上是生活随笔為你收集整理的Vue.js（17）之 插槽的全部內容，希望文章能夠幫你解決所遇到的問題。
