这个节课我们来学习vue中的插槽，在学习之前我们先来看一个问题，我们来写一个Shop组件。

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div><Shop></Shop></div>`
  })

  app.component("Shop",{
    template:`
      <div>
        <h2>欢迎来到购物商店</h2>
      </div>
    `
  })
  const vm = app.mount("#app")
</script>

在根组件中，我们采用了双标签的方式来使用Shop组件，组件的使用方式和原生html标签看起没什么却别。 原生html标签div中间可以插入其他内容或者其他标签，那我们的组件里面是不是也可以呢，答案肯定是可以的，我们可以先来试一下。

 const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div><Shop>我是店员小朱</Shop></div>`
  })

我们在shop组件里面放了一句话，希望运行的时候，能把这句话显示出来。但是当我们运行的时候，发现是没有效果的，控制台里面也看不到它。

这下大家是不是就懵逼了，明明刚刚我说了可以， 但是现在却又不行了。哈哈，想要以这样的方式把内容传入到组件内部，其实我们还需要用到一个东西叫插槽Slot。

初识插槽slot

想要实现上面的需求，我们只需要在组件内部生声明一个<slot/>来接收双标签中内容。

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div><Shop>我是店员小坤</Shop></div>`
  })

  app.component("Shop",{
    template:`
      <div>
        <h2>欢迎来到购物商店</h2>
        <slot/>
      </div>
    `
  })
  const vm = app.mount("#app")
</script>

运行结果：

除了简单支持传递一个文本以外，还可以传递html标签

const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div><Shop><p style="color:red">我是店员小朱</p></Shop></div>`
  })

我们给Shop里面传递了一个html p标签并且还给它设置了一个行类样式。

插槽中使用组件和动态数据

在组件中使用插槽时，我们还可以给它传入一个子组件，让这个子组件渲染到组内。

我们先来声明一个商品列表组件。

 app.component("goodsList",{
    template:`
    <div>
      <p>本店销售以下商品</p>
      <ol>
        <li>咖啡</li>
        <li>可乐</li>
        <li>泡面</li>
      </ol>
    </div>
    `
  })

然后直接到根组件 Shop组件标签中来使用商品列表组件。

const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div>
      <Shop>
        <goods-list/>
      </Shop>
    </div>`
  })

得到结果：

插槽能做很多事情，包括我们把一个动态数据放到组件里面去显示。

恰好根组件里面有一个message变量，我们可以直接把它通过插值表达式放进去。

const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div>
      <Shop>
        {{message}}
        <goods-list/>
      </Shop>
    </div>`
  }) 

得到结果

目前到这里，我们这几课的内容学完了。

我们简单来总结一下，什么是插槽。

插槽就是在组件模板内部，使用slot内置组件预占一个位置来接收并渲染组件使用双标签时内部传递过来的内容，它可以是一个文本或者html标签，甚至可以传递一个子组件或者动态数据。