Vue组件的插槽笔记

1.普通插槽

父组件写法：

<ShoppingCar>
	<button>按钮</button>
</ShoppingCar>

子组件写法：

<template>
	 <slot>
	      <span>默认为span</span>
	 </slot>
</template>

当组件渲染的时候，slot 里的内容将会被替换为父组件里写的内容。比如这里的结果为：
父组件里的button覆盖了子组件中slot标签原有的span

2.具名插槽

当子组件里有多个slot 标签时，父组件里新写的内容，就要考虑对应的是子组件中的哪个slot了。
这个时候可以使用具名插槽，给slot标签加上name属性，同时父组件新写的内容需要放在template里面

父组件写法：

// 第一种写法 v-slot：
<ShoppingCar>
	<template v-slot:btn>
          <button>自定义的按钮</button>
    </template>
    <template v-slot:span>
      	  <span>自定义的span</span>
    </template>
</ShoppingCar>

// 第二种 v-slot可以缩写为 #
<ShoppingCar>
     <template #btn>
         <button>自定义的按钮</button>
     </template>
     <template #span>
         <span>自定义的span</span>
     </template>
</ShoppingCar>

// 第三种 动态的具名插槽
<ShoppingCar>
	<template v-slot:[dynamicSlotName]>
          <button>自定义的按钮</button>
    </template>
</ShoppingCar>

子组件写法：

<template>
    <slot name="btn">
      <button>默认为按钮</button>
    </slot>
    <slot name="span">
      <span>默认为span</span>
    </slot>
</template>

结果为：

3.作用域插槽

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

有的时候我们需要让父组件中新写的插槽内容能够访问子组件中才有的数据，这就引出了作用域插槽。

父组件写法：

// 这里直接用了缩写 # 
// #后面跟子组件里为slot标签定义的name属性值
// 如果子组件里为定义name，则会默认把name设为default，所以vue官网的例子里用了#default
<template #name="slotProps">
  	<button v-for="(item, index) in slotProps.nameArr" :key="'info' +index">{
   
   { item }}</button>
</template>
<template #book="slotProps">
  	<div v-for="(item, index) in slotProps.bookArr" :key="'info1' + index">{
   
   { item }}</div>
</template>

子组件写法：

<h4>作用域插槽</h4>
<slot name="name" :nameArr="nameArr">
  	<span v-for="(item, index) in nameArr" :key="'info' +index">{
   
   { item }}</span>
</slot>
<slot name="book" :bookArr="bookArr">
  	<span v-for="(item, index) in bookArr" :key="'info1' + index">{
   
   { item }}</span>
</slot>

 // 这里是定义的数组
data: function() {
  return {
    nameArr: ["张三", "李四", "王五"],
    bookArr: ["c#", "javascript", "node.js"]
  };
},

结果为：