插槽都是写在父组件中子组件标签里面的
具名插槽在父组件中定义可以写多个

image.png

具名插槽的使用（插槽一般配合template使用）

第一步在父组件中定义具名插槽（v-slot 可以简写成#）

  1. <template v-slot:动态起的具名插槽的名字>
  2.   静夜思
  3. </template>

第2步在子组件中通过
注意（具名插槽可以使用多个）所以要注意名字是一一对应的
父组件中v-slot的名字和子组件中name的名字是对应的

  1. <slot name='父组件中动态起的具名插槽的名字'></solt>

image.png
具名插槽的简写形式 v-slot 用#代替
image.png
image.png
在子组件中的slot接收的时候同时可以传递一个默认的值，如下图的文字区域。父组件不传内容
的话，子组件在对应的slot位置，就显示默认的文字区域，当父组件中对应的v-slot传递内容的话
在子组件在对应的slot位置，就显示传递过来的内容，替换文字区域
image.png

作用域插槽（类似于子传父）

作用域插槽用的时候直接用#代替v-slot就行
image.png
image.png
image.png
作用域插槽的使用场景

别人比如说弄了一个全局的子组件，你不能修改子组件里面的内容
但是你还要把内容传递到子组件中，这个时候，
有可能有多个页面都使用到了这个子组件（重点）
这个时候多个页面就能利用通过往同一个子组件中传递不同的内容，能达到相当于 在不同
的页面引入同一个子组件，不同页面传递到这个子组件的内容不一样，这个子组件同样，在不同
的页面，显示的内容也不一样（如下图）
所以公共的组件千万不要自己往公共组件中书写结构，通过插槽，不同的页面导入这个组件，往这个组件中
传递不同的结构，在不同的页面，这个公共组件显示的内容也就不一样（重点）
举例
这是公共的子组件
image.png
在A组件中导入这个公共组件 使用，只接受了并渲染了这个公共组件传过来的 data,也就是公共组件的key，然后在
template中渲染这个data，会在子组件的slot处显示 key 也就是啊哈哈
image.png
页面效果
image.png
同样在另外一个组件中也导入这个公共组件，接收这个公共组件传递过来的 nn 也就是公共组件的obj ，然后渲染到template，这个时候，子组件的slot显示的效果是image.png
image.png
（总结） 在公共组件中，多个页面都要使用这个公共的组件，这个时候，千万不要直接在这个公共组件中写结构
应该使用作用域插槽，不同的页面导入并这个公共组件，在父组件中公共组件的双标签中的template中书写不同的
结构，切换页面的时候，子组件的slot处会显示不同的内容（也就是多个组件，往公共组件的同一个slot位置，传递不同的结构，页面显示互不影响—————》注意要先让公共组件中有要渲染的数据，让这个公共组件把不同的数据
传递到不同的父组件中使用，父组件在把结构传到公共组件的slot出显示

但是子组件中只有一个slot接收（不能更改这个子组件中的内容，这个时候，就需要使用作用域插槽了）
所以同时，还需要子组件里面的内容这个时候就可以使用作用域插槽
把子组件中的数据，传递给父组件，让父组件通过作用域插槽拿到这个数据这个数据，又在
template中使用子组件中传递过来的数据，构造出了一个结构给了子组件
image.png
如上图子组件把obj传递给了父组件，父组件接收后结构，这个时候在父组件中data就是子组件
中的 obj了，使用data搭建结构，然后传递到子组件中的slot使用，
因为子组件只有一个slot接收父组件中的内容，比如这个父组件是公共的组件，你又不能
改子组件的代码（尽管在子组件中渲染的还是子组件的内容，）但是还需要把子组件的这个数据
传递到父组件中，在父组件中使用这个数据，在template中使用这个数据，渲染子组件的结构。
在子组件的slot处 显示

利用作用域插槽，把子组件的数据，传递到父组件，父组件，接收，到这个数据
然后使用（注意使用的结构。是写在父组件中子组件的双标签template里面的）

image.png
在一个页面中引入了第三方插件 也算引入了一个组件，如果要获得本该渲染当前行的数据用
v-solt=‘scope’注意这个scope是一个形参
//slot-scope=”scope”等同于v-slot=‘scope’
image.png
image.png