vue中slot插槽的使用

插槽slot就是在模板中将携带的内容填充进某个指定位置. 带不带内容、带什么内容由父组件来控制，将内容放在哪则由子组件控制。 匿名插槽：无论父组件加了什么全部往里填充，没有指定位置默认是匿名 具名插槽：在插槽中添加name的方式指定位置

匿名插槽

父组件

.<template>
  <div>
    <div>这里是父组件</div>
    <!-- 步骤四:使用子组件,当没有命名时,默认把全部内容填入匿名插槽 -->
    <myhead>这里从父组件引入到子组件的匿名插槽</myhead>
  </div>
</template>

<script>
// 步骤二:引入子组件
import myhead from "../components/myhead";
export default {
  components: {
    //   步骤三:注册子组件
    myhead,
  },
};
</script>

<style>
</style>

子组件

.<template>
  <div class="header">
    <div>这里是子组件</div>
    <!-- 步骤一:写入slot标签 -->
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

过程图 效果

具名插槽

父组件

语法:父组件<标签 slot='命名'>内容<标签> 子组件< slot name="">

.<template>
  <div>
    <!-- 步骤四:使用子组件,当没有命名时,默认把全部内容填入具名插槽 -->
    <myhead>
      <p slot="left">左</p>
      <p slot="center">中</p>
      <p slot="right">右</p>
    </myhead>
  </div>
</template>

<script>
// 步骤二:引入子组件
import myhead from "../components/myhead";
export default {
  components: {
    //   步骤三:注册子组件
    myhead,
  },
};
</script>

<style>
</style>

子组件

.<template>
  <div class="header">
    <!-- 步骤一:写入slot标签 -->
    <slot name="left"></slot>
    <slot name="center"></slot>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {};
</script>

.<style lang="less" scoped>
.header {
  display: flex;
}
</style>

效果