【vue】插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件 。

翻译一遍就是父组件给子组件样式，子组件给父亲数据

默认插槽

父组件中：

<Category>
   <div>html结构1</div>
</Category>

子组件中：

<template>
    <div>
       <!-- 定义插槽 -->
       <slot>插槽默认内容...</slot>
    </div>
</template>

这时候父组件中为子组件Category标签里面放了一个div样式，在子组件中使用slot标签， <div>html结构1</div>就可以在父组件中展示出来

具名插槽

父组件

<Category title="标题1">
      <h1 slot="center" >默认插槽1</h1>
      <a  slot="footer" href="www.baidu.com">百度</a>
</Category>

子组件

<div class="category">
    {{title}}
   <slot name="center">当插槽里面没有东西时候展示1</slot>
   <slot name="footer">当插槽里面没有东西时候展示2</slot>
</div>

具名插槽即是当父组件里面有多个标签的时候，此时若不指定子组件里的slot不知道到底放那些，这时候通过取名，指定那个标签样式放入哪个slot插槽里面

作用域插槽

这时候要是数据在子组件里面，但是放入slot的样式依然是父组件放入，这时候作用域插槽就可以实现子传父

父组件

<Category title="标题1">
  <template scope="demo">
    <!-- scope介绍子组件穿回来的参数 -->
    <div>
      {{ demo.msg }}
      {{ demo.games }}
    </div>
  </template>
</Category>

子组件

<template>
    <div class="category">
        <slot :msg="msg" games="123"></slot>
    </div>
</template>

<script>

export default {
    data() {
        return {
            msg:'作用域插槽，可以理解为父组件提供样式，子组件提供数据'
        }
    },
    props:['title']
}
</script>

<style  scoped>
  ...
    }
</style>

这里子元素在slot的插槽标签里面绑定了 :msg="msg"，在父元素里通过 <template scope="demo"> </template>中scope接受数据其中demo这里可以为任意名。这时候父元素里面就可以接受子元素传递过来的数据了。