vue插槽

在我们开发项目的时候，我们往往会封装一些公用的组件，但是组件在应用的过程中，往往不能满足我们的需求，这个时候，我们就需要用到插槽

1.定义

vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容，那插槽是怎么使用的呢？它要解决什么场景的问题呢？ 我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。 注意：以下的所有内容是基于vue版本 2.6.0 起

2.例子

首先写一个父组件

<template>
  <div>
    <div>我是父组件</div>
    <mysolt><p>测试内容是否显示</p></mysolt>
  </div>
</template>

<script>
import mysolt from "./mysolt";
export default {
  components: {
    mysolt,
  },
};
</script>

<style>
</style>

然后是子组件

<template>
  <div>
    <div>我是子组件</div>
  </div>
</template>

<script>
</script>

<style>
</style>

在这里关键点是父组件里面调用子组件，然后看看是否显示测试内容显示

执行结果

 <slot></slot>

执行结果

执行结果

3.插槽的分类

3.1默认插槽
在我们引入一个button的时候,你希望btn里面的值，可以修改，可以控制，这个时候
button 组件 需要有<slot>标签,里面默认的文字就是button的内容

<template>
  <button type="submit">
    <slot>Submit</slot>
  </button>
</template>

当你想要调用这个组件修改里面的值的时候,你只要传对应的值就即可

 <submitbutton>wsss</submitbutton>

3.2具名插槽
如果我们在子组件特定的位置显示一些不一样的内容，这个时候，就用到了具名插槽，我们可以给插槽绑定name的值

子组件
<template>
  <div>
    <header>
      <slot name="head"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件
<template>
  <div>
    <div>我是父组件</div>
    <mysolt
      ><p>测试内容是否显示</p>
      <template v-slot:head>
        <div>这里是头</div>
      </template>
      <template>
        <h1>这里是main</h1>
      </template>
      <template v-slot:footer>
        <p>这里是脚</p>
      </template>
    </mysolt>
  </div>
</template>

效果

当然也可以简写 v-slot用#代替

<template>
  <div>
    <div>我是父组件</div>
    <mysolt
      ><p>测试内容是否显示</p>
      <template #head>
        <div>这里是头</div>
      </template>

      <h1>这里是main</h1>

      <template #footer>
        <p>这里是脚</p>
      </template>
    </mysolt>
    <submitbutton>wsss</submitbutton>
  </div>
</template>

3.3作用域插槽
在我们父组件需要调用子组件的时候，然后呢，子组件的值需要替换，就需要用到作用域插槽

子组件，这里我们可以用v-bind 给我们的family绑定一个值，任意就好
<template>
  <span>
    <slot v-bind:like="family">
      {{ family.name }}
    </slot>
  </span>
</template>

<script>
export default {
  data() {
    return {
      family: {
        name: "张三",
        names: "李四",
      },
    };
  },
};
</script>

父组件
这里的slotProp相当于就是我们的props,在子组件的时候传过来的
我们可以拿到like里面所有的值，然后去覆盖  
如果遇到多次调用，你也可以去结构like的值
    <Scope>
      <template v-slot="slotProp"> {{ slotProp.like.names }} </template>||
      <template v-slot="{like}">{{like.names}}</template>
    </Scope>