slot插槽/slot-scope作用域及v-slot使用

匿名插槽子组件：

父组件调用这个匿名组件时，传递过来的内容可以替换掉，来展示相应的内容。

具名插槽子组件：

对比匿名，在slot多了一个name属性

vue2.6版本新用法

在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效。

原来父组件中的

  <div slot="nameSlot">  改成  <template v-slot:nameSlot >
  // 指令+参数形式写并且是在tenmplate标签上。
  // 所以原本父组件中下面的nameVSlot的写是2.6.0的新版本哦~

作用域插槽：

绑定了一个具体的数据源，这样就可以在父组件使用作用域插槽的数据(子组件内数据可以被父页面拿到)

//在子组件中代码
：data="data" //第一个data是属性，第二个data是数据data.

//在父组件中代码
<template slot="childSlot" slot-scope="slotValue">
//通过slot="childSlot"来绑定作用域插槽
//通过slot-scope来获取插槽内的数据，slotValue可以自己命名
//而slotValue.data中的data是确定的，是子组件：data="data"，

vue2.6版本新用法

vue 2.6.0之后 v-slot 只能用在 组件component 或者 template 上 ，用在 div 或 p 这种标签上是会报错的

在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效。

1） 两个属性合并成了一个 v-slot : 插槽名称 = ’ 传过来的值 ’ 。

<child-slot v-slot:childSlot="slotValue">
//这样就可以通过slotValue.data使用数据

2） 组件页面中slot的内容没有变化 。

3） v-slot 不能用在 html 标签上 。

4） 如果是默认插槽 可以写成 v-slot=‘xxx’。

5） 还增加了 可以es6解构插槽props 和 设置默认值的内容，

<child-slot v-slot:childSlot="{ data }">
直接使用data

父组件代码