vue组件----插槽的使用
插槽：形象的说就是挖个坑，等着组件的使用者进行填充
插槽的本质：内容分发，子组件写了插槽，父组件可以将其内容直接放到页面上
用来实现组件内容的分发，通过slot标签，可以接收到写在 组件标签内 的内容
vue提供组件插槽的能力，允许开发者在封装组件时，把不确定的部分定义为插槽
让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，
适用于父组件===>子组件（父传子）
父组件中 ：<子组件>hello world
子组件中：
我是子组件
那么页面上的渲染结果为：
hello world
我是子组件
也就是说子组件标签中的内容属于父组件，因为作用域问题不会直接被识别， 除非也属于子组件才能在页面中进行渲染，所以通过
即：子组件标签内的所有内容都会通过子组件的
默认(匿名)插槽
对于插槽，默认名字为 default
若没有给插槽传入内容，当需要一个默认内容时，则默认内容将会在页面渲染
若有内容传入插槽时，默认内容将会被覆盖
子组件中可以有多个插槽，若都是匿名插槽，则这些插槽都会接收到同样的信息进行渲染，所以和匿名插槽相对的就是具名插槽
具名插槽
一个组件有时候可以有多个插槽，为了将这些插槽区分开，也就有了具名插槽
当一个组件内有2处以上需要外部传入不同标签的地方
子组件：给插槽进行命名----title和price
父组件：v-slot: 可以用#进行简写，但必须有具体参数名字才可以
哈哈哈哈哈哈
零零零零
用把内容包裹起来，通过名字的一一对应插入到子组件的插槽内
一个包裹一个匹配给插槽的内容，
一个v-slot只能给一个，
有几个插槽要匹配就要写几个
若父组件的子组件标签内容里没有给指定名字，则匹配给匿名插槽，
若没有匿名插槽，则不会给任何匹配（不显示）
作用域插槽
可以传递数据的插槽
原因：
因为父级模板中的内容都在父级作用域中编译的，子级模板中的内容都在子级作用域中编译的
使用：
子组件里的值，在给插槽赋值时在父组件环境下使用-----让子组件的内容传给父组件
（用于子传父时可以理解为：数据在子组件的自身，但根据数据生成的结构需要组件的使用者来决定---把子组件内的内容通过父组件以插槽方式再传递给子组件本身的solt标签内,就可以把子组件data里的内容绑到slot标签上）
第一种：把子组件的数据传递到父组件并渲染
步骤：1.父组件与子组件的具名插槽做匹配
2.给子组件自定义属性并绑定要传递的数据的属性
3.让父组件再重新自定义一个名接收子组件传递过来的内容
4.在父组件的标签内通过接收的自定义名讲接收的内容进行解构渲染
子组件插槽：
父组件：
//自定义变量是具名插槽传递过来的自定义属性中的所有属性，
//会自动绑定slot上所有属性和值 若是个对象，则需要.来解构
接收到的内容为{{自定义变量}}
//自定义名内的内容一般会包含自定义属性，需要解构
总结：
组件内变量绑定到slot上，使用组件v-slot:插槽名="自定义变量", 变量上会自动绑定属性和值
注意：子组件中的自定义属性如果是个对象，则在父组件中可以直接通过解构的方式简写
如默认插槽：item是个对象
子组件中----
自定义属性row 父组件中----
{{row.name}}