Vue.js（17）之 插槽

Posted 2021-01-24 houfee

 

 

单个插槽（匿名插槽）

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. 注意：同一组件中不同插槽的作用域，是独立的！