slot 插槽的使用
slot 基本使用
怎么使用用插槽?
在子组件中, 使用特殊元素就可以为子组件开启一个插槽
该插槽插入什么内容取决于父组件如何使用
- <!-- 组件中定义插槽 -->
- <slot>
- </slot>
- <!-- 组件中定义插槽, 插槽中含默认值 -->
- <slot>
- <p>
- 123
- </p>
- </slot>
- <!-- 如果有多个值同时放入插槽进行替换时, 一起作为替换元素,-->
具名插槽
当子组件功能复杂时, 子组件的插槽可能并非只有一个
这是我们要给每一个插槽起一个名字, 来区分这些插槽来对应的插入哪些内容
- <slot name="letf">
- <span>
- 左边
- </span>
- </slot>
- <slot name="right">
- <span>
- 右边
- </span>
- </slot>
- <slot name="right">
- <span>
- 右边
- </span>
- </slot>
- <!-- 父组件为具名插槽插入内容 -->
- <cpn>
- <span slot="center">
- 标题
- </span>
- <button slot="right">
- 返回
- </button>
- </cpn>
作用域插槽
作用域插槽是一个比较难理解的点, 这里用一句话对其做一个总结是这样的:
父组件替换插槽的标签, 但内容由子组件来提供
我们先提一个需求:
子组件中包括一组数据, 比如['JavaScript','Python','Swift','Go','C++']
需要在多个界面进行展示
某些界面是以水平方向展示
某些界面以列表形式展示
某些界面直接展示数组
内容在子组件, 希望父组件告诉我们如何展示该怎么办?
利用 slot 作用域插槽就可以了
要在父组件中拿到子组件中的数据需要如下两个步骤
在子组件的 slot 插槽中绑定数据 :data="绑定数据"
在父组件中用 slot-scope='slot'来获取子组件的 slot 插槽对象
- <!-- 父组件中引用子组件插槽传来的数据 -->
- <div id="app">
- <!-- 默认插槽内容 -->
- <cpn></cpn>
- <!-- 插槽内容: 水平方向展示 -->
- <cpn>
- <!-- 目的是获取子组件中的 pLanguages -->
- <template slot-scope="slot">
- <!-- <span v-for="(item,index) in slot.data">{{item}}--</span> -->
- <span>{{slot.data.join('--')}}</span>
- </template>
- </cpn>
- <!-- 插槽内容: 列表方式展示 -->
- <cpn>
- <template slot-scope="slot">
- <table border="1">
- <tr v-for="(item,index) in slot.data"><td>{{item}}</td></tr>
- </table>
- </template>
- </cpn>
- </div>
- <!-- 子组件中插槽绑定数据 -->
- <slot :data="pLanguages">
- <ul>
- <li v-for="(item,index) in pLanguages">{{item}}</li>
- </ul>
- </slot>
来源: http://www.bubuko.com/infodetail-3632149.html