1回答

西门老舅

2023-01-11

你好，作用域插槽还是挺有用的。

经常自己封装组件或使用第三方组件的时候，往往需要从组件内部拿到数据给内容分发的部分进行使用。

这里举一个例子，比如我们使用 element-plus中的表格组件，想要点击某一个单元格的时候，能够拿到当前这个单元格所在这一行的所有数据，就需要用作用域插槽来完成。

<el-table :data="tableData" border style="width: 800px">

      <el-table-column prop="date" label="Date" width="180" />

      <el-table-column prop="name" label="Name" width="180" />

      <el-table-column prop="address" label="Address" />

      <el-table-column prop="handle" label="操作" width="180">

        <template #default="{row}">

          <el-button type="primary" icon="edit" circle @click="handleEdit(row)"></el-button>

        </template>

      </el-table-column>

    </el-table>

row就是作用域插槽提供的数据，这样就可以知道编辑的是哪一行数据了

1

2

西门老舅

回复

小雨点3545254

主要就是结构来自于父组件，而数据来自于子组件，这种情况就比较适合用作用域插槽。 可以再举一个例子：vue中的路由 默认会渲染成为 a 标签，但是我不希望渲染成 a 标签，想自己定义结构，就可以用插槽了 这个按钮就是新的结构，但是我除了结构外，我可能还需要路由的数据或功能怎么办呢？这些可是在router-link这个组件内部提供了呀，所以可以采用作用域插槽来提供给button结构 这个 isActive, navigate 就是子组件中的数据或功能，接下来就可以给父组件的结构进行使用啦

2023-06-27

共2条回复