1. 程式人生 > >Vue.js(17)之 插槽

Vue.js(17)之 插槽

 

 

單個插槽(匿名插槽)

  1. 定義插槽:在子元件作用域中,使用 <slot></slot> 定義一個插槽;

  2. 使用插槽:在父作用域中使用帶有插槽的元件時,元件內容區域中的內容,會插入到插槽中顯示;

  3. 注意:在一個元件的定義中,只允許出現一次匿名插槽

多個插槽(具名插槽)

  1. 定義具名插槽:使用 name 屬性為 slot 插槽定義具體名稱;<slot name="header"></slot>

  2. 使用具名插槽:在父作用域中使用帶有命名插槽的元件時,需要為內容指定 slot="插槽name"

    來填充到指定名稱的插槽;

 

 

作用域插槽

  1. 定義作用域插槽:在子元件中,使用 slot 定義插槽的時候,可以通過 屬性傳值 的形式,為插槽傳遞資料,例子:<slot text="hello world" :msg="sonMsg" row="rowData"></slot>

  2. 使用作用域插槽:在父作用域中,通過定義 slot-scope="scope" 屬性,接收並使用 插槽資料;

  3. 注意:同一組件中不同插槽的作用域,是獨立的!