vue插槽在工作中的妙用~v-slot，作用域插槽

在父级的子组件标签内写内容，子组件用可以接收到内容，之前一直觉得插槽好像很鸡肋，今天终于发现了它的妙用。
简单的基础这里不复述，可以直接看vue官网vue官网插槽文档
最近做的项目，页面重复内容很多，所以需要封装，table表的操作栏有审核、删除、查看等多种操作，不同页面展示不同功能，以前的话，都是直接在封装的页面把所有的操作按钮都写出来，后面用的时候，用v-if根据条件判断是否展示。但是这么写，耦合性就比较大了，一旦改动，父子组件页面需要改动。而且需要在父子之间多次传值，挺麻烦：

用作用域插槽就简单了很多， 父组件中：

<childNodes>
    <!-- 这里{ tableRow} 是用了es6的简写方式， 原写法是v-slot:default="{ tableRow }， 
这样写的话，方法中要写：deleteResource(val) { val.tablerow } 拿到值  -->
   <template v-slot:default="{ tableRow }">
 	<el-button type="text" @click="deleteResource(tableRow)">删除</el-button>
   </template>
</childNodes>

父组件中的方法

deleteResource(val) { // 这里可以拿到子组件scope.row的内容
   console.log(val);
}

子组件中：

<el-table-column label="操作">
  <template slot-scope="scope">
    <slot :tableRow="scope.row"></slot>
  </template>
</el-table-column>

对你有帮助的话点个赞哦~没看明白的话可以私信