Vue插槽

1.默认插槽

        父组件中引用子组件标签(vc)，并且在其中写其他内容

<template>
  <div> 
      <vc>
          <h1>Hello Slot</h1>
      </vc>
  </div>
</template>

        在子组件中通过slot进行接受，将组件中的内容放置在指定位置

<template>
  <div>
      <h1>{{title}}</h1>
        //将父组件传过来的内容放在slot标签位置
      <slot></slot>
  </div>
</template>

2.具名插槽

        当父组件向子组件传递多个内容，则需要通过编写slot属性进行标识，在子组件通过name属性接收

        父组件：

<template>
  <div>
    <vc>
      <!-- 将原生html内容插入再  slot标签中 -->
      <!-- 通过slot属性 将内容插入对应slot位置 -->
      <h3 slot="one">one</h3>
      <h4 slot="two">two</h4>
    </vc>
  </div>
</template>

        子组件：

<template>
  <div>
      <div>
          <slot name="two"></slot>
      </div>
      <slot name='one'></slot>
  </div>
</template>

3.作用域插槽：子组件将数据传给父组件，父组件进行特定样式展现

        子组件

<template>
	<div>
        // :xxx='xxx' 可将数据传递给父组件
		<slot :info="infos">我是默认的一些内容</slot>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				infos:['a','b','c'],
			}
		},
	}
</script>

        父组件

<template>
	<div>
		<Category>
            <!-- 通过scope属性接受来自子组件的数据 xxx任意 -->
			<template scope="xxx">
				<ul>
					<li v-for="(item,index) in xxx.info" :key="index">{{item}}</li>
				</ul>
			</template>
		</Category>
	</div>
</template>