vue中slot插槽的使用

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作用域插槽就可以了

要在父组件中拿到子组件中的数据需要如下两个步骤

1. 在子组件的slot插槽中绑定数据 :data="绑定数据"
2. 在父组件中用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>