Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决

一、参考资料

---

• 视频资料

二、运行环境

---

• Windows11
• Visual Studio Code v2022
• Node.js v16.5.01
• Vue/cli v5.0.6
• Bootstrap 5.1.3

三、Vue2插槽

---

Vue2 实现了一套内容分发的 API，，将 元素作为承载分发内容的出口。

作用： 父组件通过定义插槽向子组件中传递定制化的内容（数据或函数）。

3.1 默认插槽

接下来举一个案例来体现插槽的作用。

比如在App组件中：

<template>
  <div>
    <Header>Header>
  div>
template>

我定义了一个模板，里面有一个div，div里面引入了自定义的Vue组件Header

如果我想在App组件里引入Header组件，并向里面添加内容，比如：

<Header>
	<h1> 搜索引擎 h1>
Header>

在默认情况下，

是不会渲染出来的，当然其他普通的HTML元素也不会渲染，此时就可以使用Vue提供的 slot 插槽，我们放一个插槽在这个Header组件里面，类似这样：

（如果引入Header组件时，里面没有内容，那么就会出现Header里标签的内容：“插槽为空”

<template>
    <div>
        <slot>插槽为空slot>
    div>
template>

这仿佛就是在提示Vue： 这里是一个待填的坑，将由父组件来填。

由于是父组件来填的，所以 slot 插槽可用于父组件向子组件传递数据。

注意，通过 slot 插槽渲染的元素，其样式可以通过父组件来设置。

3.2 具名插槽

具名插槽

据Vue官方的文档介绍，所谓的具名插槽其实就是有name属性值的插槽，（从vue2.6.0开始，默认的插槽的name值为default），比如我们可以在同一个组件中设置多个插槽，这样这个组件的父组件就可以向不同的插槽里插入元素。

同样以App组件 和 Header组件为例。

Header 子组件：

<template>
    <div>
        <slot name="a">插槽a为空slot>
        <slot name="c">插槽c为空slot>
    div>
template>

App父组件：

<template>
  <div>
    <Header>
    	<h1 slot="a">插槽ah1>
    	<h1 slot="c">插槽c 内容1h1>
    	<h1 slot="c">插槽c 内容2h1>
    Header>
  div>
template>

上述App组件中的h1标签可以是其他的HTML标签。

这里指定的slot是可以复用的，不过插入相同插槽的元素可以用template标签来指定子组件的插槽，上述App组件代码的简写形式如下：

<template>
  <div>
    <Header>
    	<h1 slot="a">插槽ah1>
    	<template slot="c">
    		<h1>插槽c 内容1h1>
    		<h1>插槽c 内容2h1>
    	template>
    Header>
  div>
template>

注意：上述在template直接使用slot的写法已经在Vue2.6.0 起被废弃 查看文档

Vue2.6.0 版本以后的 具名插槽 用法如下 查看文档：

声明插槽的方式不变（不过添加了default默认的插槽机制）：

<slot name="slot1">slot>

<slot>slot>

父组件在引入指定插槽时候，template指定插槽时必须使用 v-slot ，类似于 v-on 的@和 v-bind的:，v-slot 其简写形式为 #，比如：

<template>
  <div>
    <Header>
    	<h1 slot="a">插槽ah1>
    	<template #c>
    		<h1>插槽c 内容1h1>
    		<h1>插槽c 内容2h1>
    	template>
    Header>
  div>
template>

注意: v-slot 属性只支持