vue中具名插槽slot使用详细教程版

最新推荐文章于 2024-09-01 20:46:15 发布

前端小云儿

最新推荐文章于 2024-09-01 20:46:15 发布

阅读量708

点赞数

分类专栏： vue知识点以及es6语法使用文章标签： vue.js

本文链接：https://blog.csdn.net/jieweiwujie/article/details/126750159

版权

vue知识点以及es6语法使用专栏收录该内容

85 篇文章 6 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文是一篇关于Vue.js具名插槽的详细教程，从普通的插槽使用开始，逐步讲解如何在子组件中定义插槽，并在父组件中使用，包括如何实现具名插槽的效果展示，帮助读者掌握Vue组件间内容分发的核心技巧。

摘要由CSDN通过智能技术生成

1 普通的插槽父组件引入子组件home2

<template>
  <div style="margin: 50px; line-height: 34px; width: 800px">
    <h2></h2>
    <h3>slot是Vue中的插槽，首先它是使用在 子组件 中的</h3>
    <h2>1 . 普通 slot 插槽</h2>
    <h3>在子组件内占坑，在父组件里填坑,这句话说的特别好</h3>
    <h3>
      slot一般都是子组件定义了主体部分，父组件引入，然后父组件根据需求不同需要向里面添加不同的内容
    </h3>

    <h3></h3>
    <h2>2 . 具名插槽</h2>
    <h3>具名插槽的使用语法</h3>
    <h3>1 . 子组件定义slot时，在标签上加上name='xxx'属性</h3>
    <h3>2 . 父组件将想插入的部分最外部的div上加上slo

了解本专栏