Vue中插槽的使用

插槽内容

// 子组件 HomeChild
<template>
  <div>
    <slot></slot>
  </div>
</template>



// 父组件 Home
<template>
  <div>
    <HomeChild>
    	// 插槽内可以包含任何模板代码（包括 HTML、其它的组件）
    	// <HomeChild />
        我是父组件
    </HomeChild>
  </div>
</template>

// 当组件渲染的时候，<slot></slot> 将会被替换为“我是父组件”
// 注意：如果HomeChild组件的template 中没有包含一个 <slot> 元素，则Home组件起始标签和结束标签之间的任何内容（‘我是父组件’）都会被抛弃。

后备内容

// 子组件
<template>
  <div>
    <slot>
    	// 后备内容
		我是子组件
	</slot>
  </div>
</template>

// 父组件
<template>
  <div>
    <HomeChild> </HomeChild>
  </div>
</template>

// 如果父组件中不提供任何插槽内容，后备内容“我是子组件”将会被渲染

具名插槽

// 子组件
<template>
  <div>
  	// slot 标签没有name属性，则为默认插槽。具备name属性，则为具名插槽
    <slot name="content"></slot>
  </div>
</template>



// 父组件
<template>
  <div>
    <HomeChild>
      <template v-slot:content>我是父组件</template>
    </HomeChild>
  </div>
</template>


// 有时我们需要多个插槽
// 子组件 
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      // 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>


// 父组件
<template>
  <div>
    <HomeChild>
      <template v-slot:header>111</template>
      <p>222</p>
      // 如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容：
      // <template v-slot:default>
      // 	<p>222</p>
      // </template>
      <template v-slot:footer>333</template>
    </HomeChild>
  </div>
</template>


// 我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
// <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

作用域插槽

让插槽内容能够访问子组件中才有的数据

// 子组件
<template>
  <div>
    <slot :user='user'>{{ user.name }}</slot>
  </div>
</template>

<script>

export default {
  name: "",
  data() {
    return {
      user: {
        name: "小明",
        age: 10
      },
    };
  },
};
</script>


// 父组件
<template>
  <div>
    <HomeChild>
    	// 就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：（<template v-slot="slotProps">{{ slotProps.user.age }}</template>）
        <template v-slot:default="slotProps">{{ slotProps.user.age }}</template>
    </HomeChild>
  </div>
</template> 

// 这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

独占默认插槽的缩写语法

// 父组件
// 当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：
<template>
  <div>
    <HomeChild v-slot:default="slotProps">
       {{ slotProps.user.age }}
    </HomeChild>
  </div>
</template> 

// 等同于
<template>
  <div>
    <HomeChild>
       <template v-slot:default="slotProps">
       		{{ slotProps.user.age }}
       </template>
    </HomeChild>
  </div>
</template> 

结构插槽prop

<template>
  <div>
    <HomeChild>
        <template v-slot:default="{ user }">{{ user.age }}</template>
        // 重命名
        // <template v-slot:default="{ user: person }">{{ person .age }}</template>
        
        // 定义后备内容，用于插槽 prop 是 undefined 的情形：
        // <template v-slot:default="{ user = { age: 99 } }">{{ user .age }}</template>
    </HomeChild>
  </div>
</template>

动态插槽名

 <template v-slot:[dynamicSlotName]>
    ...
  </template>

具名插槽的缩写

// 跟 v-on 和 v-bind 一样，v-slot 也有缩写,例如 v-slot:header 可以被重写为 #header