请问作用域插槽的主要应用场景是什么啊？

Question

请问老师：作用域插槽的主要应用场景是什么啊？

Answer 1

西门老舅 2023-01-11 10:53:49

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

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

这里举一个例子，比如我们使用 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就是作用域插槽提供的数据，这样就可以知道编辑的是哪一行数据了

• 小雨点3545254 #1

  能详细讲一讲作用域插槽吗，还是没有理解？

• 西门老舅 回复 小雨点3545254 #2

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