vue中的插槽以及对element中table组件中的插槽理解

一、普通插槽的写法

在子组件（children-page.vue）中用< slot >标签定义一个插槽，如下:

    <template>
        <div>
            <!-- 定义了一个插槽 -->
            <slot></slot>
            <!-- 定义了一个插槽 -->
        </div>
    </template>

在父组件（parent-page.vue）中的代码如下

    <children-page>
        <!-- 这段内容将展示上子组件的插槽当中 -->
        <p>今晚有内鬼，取消交易</p>
    </children-page>

二、具名插槽的写法

在父组件中，我们可以有多个插槽内容，我们可以通过v-slot="插槽名"来绑定子组件的一个插槽，这时候我们需要在父组件中使用template标签来包裹我们的插槽内容。我们可以通过< slot >标签的name属性来关联父组件的插槽内容，如下：

    <children-page>
        <!-- 这段内容将展示上子组件的title插槽当中 -->
        <template v-slot:"title">
            <h1>来自天王山的短信：</h1>
        </template>
        
        <!-- 这段内容将展示上子组件的detail插槽当中 -->
        <template v-slot:"detail">
            <p>今晚有内鬼，取消交易</p>
        </template>
    </children-page>

在子组件中我们通过多个插槽来接收，并通过name属性接收指定插槽

    <template>
        <div>
            <!-- 定义了一个title插槽 -->
            <slot name="title"></slot>
            
            <!-- 定义了一个插槽 -->
            <slot name="detail"></slot>
        </div>
    </template>

具名插槽的v-slot="name"可以简写成 #name,如下：

    <children-page>
        <!-- 这段内容将展示上子组件的title插槽当中 -->
        <template #title>
            <h1>来自天王山的短信：</h1>
        </template>
        
        <!-- 这段内容将展示上子组件的detail插槽当中 -->
        <template #detail>
            <p>今晚有内鬼，取消交易</p>
        </template>
    </children-page>

三、具名插槽传参

具名插槽的传参是通过将子组件的数据传递给父组件使用，父组件可以通过具名插槽来接收子组件的数据，子组件< slot >标签上的自定义属性可以在父组件上进行接收，接收过来的值是子组件< slot >标签上的所有自定义属性的键值对，也就是说父组件接收的值是子组件自定义属性键值对组合成的一个对象。

    <children-page>
        <!-- 这段内容将展示上子组件的detail插槽当中，通过title接收子组件传递过来的参数 -->
        <template #detail='user'>
            <p>今晚有内鬼，取消交易</p>
            <p>{{user.gender}}</p>
            <p>{{user.age}}</p>
        </template>
    </children-page>

在子组件中我们定义了以下插槽，并通过自定义属性name和age像父组件传递了两个参数

    <template>
        <div>
            <!-- 定义了一个detail插槽 -->
            <slot name="detail" :gender="男" :age="18"></slot>
        </div>
    </template>

在父组件上我们可以通过具名插槽接收一个user对象，user={name:'男',age:18}。

三、element中的table组件

在element的table组件当中，也应用的插槽

<el-table-column label="操作"> 
    <template slot-scope="scope"> 
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> 
    </template> 
</el-table-column>

在element中也是应用了插槽传参的方式，ElTableRow组件上添加了自定义属性并将自己所在行的数据添加到属性当中，将ElTableRow组件的数据传递到父组件的scope对象当中，从而让我们可以使用子组件的表格信息。