关于插槽的一些知识点

作用：让组件内部的一些 结构 支持 自定义

需求：将需要多次显示的对话框，封装成一个组件

问题：组件的内容部分， 不希望写死， 希望能使用的时候 自定义。怎么办？

1.插槽-默认插槽

新建MyDialog文件，在APP.vue中进行导入注册。子组件里面，头部、内容、底部，三个div组成，样式在style里面

当我们使用这个MyDialog时，希望可以使用多次，但是内容应该是不相同的，而不是这样相同组件，内容也相同

此时，我们就可以借助插槽来最大程度上实现组件复用。

插槽的作用时 实现内容分发，需要两个步骤来实现：

1>在组件内用slot占位

2>使用组件时，传入具体标签内容插入

组件内需要定制的结构部分，改用占位；父组件中插槽内容，就是要分发的内容。槽处理的本质就是将指定内容放到指定位置。

在子组件中，需要定制的位置，使用slot占位，在父组件中，使用组件时，组件标签内部填入内容

可以在里面放标签，比如div或者p标签

实现原理：

当子组件vm实例化时，获取到父组件传入的slot标签内容，存放在vm.$slot 中，默认插槽为vm.slot.default,具名插槽为vm.slot.xx,，xx为插槽的名字，当组件执行渲染函数时，遇到slot标签，使用$slot中的内容进行提换，此时可以为插槽传递数据，若存在数据，则可称改插槽为作用域插槽。

2.插槽-后备内容

通过插槽完成了内容的定制，传什么显示什么，但是如果不传，则是空白

(用户体验不好) 能否给插槽设置 默认显示内容 ？

封装组件时，可以为预留的``插槽提供后备内容（默认内容）

语法：在标签内，放置内容，作为默认内容

效果：

     *外部使用组件时，不传东西，则slot会显示后备内容

     *外部使用组件时，传东西了，则slot整体会被换掉

 

3.插槽-具名插槽

需求:一个组件内有多处结构，需要外部传入标签，进行定制

默认插槽：一个的定制位置

如果直接使用，那么三个位置的内容是相同的，无法实现组件内定制多处结构。

语法：

1>多个slot使用name属性区分名字

2>template配合v-slot:名字来分发对应标签

3>v-slot:插槽名 可以简化成 #插槽名

3.作用域插槽

插槽的分类：

默认插槽、具名插槽

作用域插槽只是插槽的一个传参语法

定义slot插槽的同时，是可以传值的。给 插槽 上可以绑定数据，将来 使用组件时可以用。

场景：封装表格组件

1.父传子，动态渲染表格内容

2.利用默认插槽，定制操作列

3.删除或查看都需要用到当前项的id，属于组件内部的数据，通过 作用域插槽 传值绑定，进而使用。

基本使用步骤

1.给slot标签，以 添加属性的方式传值

2.所有添加的属性，都会被收集到一个对象中

3.在template中，提供 ` #插槽名 = “obj” `接收，默认插槽名为default

需要父传子来传数据

测试文本效果：将所有属性添加到一个对象当中，传给父组件，父组件用template接收,（默认插槽，用 v-slot:插槽名=“变量名”。简写：#default=”对象名”）

这是第一个表的 “删除” 代码即效果图，用console.log 将 要删除的id在控制台输出

   

这是第二个表的“查看”代码以及效果图

  

这是一些关于插槽的学习，下面是完整代码

MyTable.vue

App.vue