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>

效果
在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页