如何使用Vue命名插槽创建多个模板插槽？

Vue 插槽允许将父组件中的内容注入到子组件中。

创新互联公司-专业网站定制、快速模板网站建设、高性价比桐城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式桐城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖桐城地区。费用合理售后完善，十余年实体公司更值得信赖。

这是最基本的示例，如果我们不提供父级的任何slot 内容，则我们将放在其中的任何内容都会作为后备内容。

 
 
 
 
    
  
  
  
  
  1. // ChildComponent.vue 
    2. 
  
  
  
  
  2.  
    3.

你组件代码：

 
 
 
 
    
  
  
  
  
  1. // ParentComponent.vue 
    2. 
  
  
  
  
  2.  
    3.

编译后，我们的 DOM 将如下所示

 
 
 
 
    
  
  
  
  
  1.  替换 slot 的默认内容 
     
    2.

我们还可以将父组作用域内的任何数据写在 slot 区域中。例如，父组件有一个名为title的数据字段，我们可以使用以下代码将其注入到子组件中：

 
 
 
 
    
  
  
  
  
  1. // ParentComponent.vue 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6.

为什么我们需要命名插槽

在Vue中使用命名插槽有两个步骤：

  • 使用name属性从子组件中命名 slot
  • 使用v-slot指令从父组件向这些命名插槽提供内容

默认情况下，不给插槽显式的name属性时，它有默认名字是default。

为了给我们的 slot 起个名字，元素具有一个特殊的name属性，可以让我们在多个插槽之间进行区分。

在下面的Article.vue 中，我们命名三个 slot

 
 
 
 
    
  
  
  
  
  1. // Article.vue - Child Component 
    2. 
  
  
  
  
  2.  
    3.

然后，在父组件中，我们可以在元素上使用v-slot指令指定我们想要注入内容的slot。

 
 
 
 
    
  
  
  
  
  1. // ParentComponent.vue 
    2. 
  
  
  
  
  2.  
    3.

因为这是没有指定 slot 的名称，所以显示的是 slot 默认的内容。

要解决这个问题，可以使用v-slot，指定的名称要确保名称与我们在子组件中声明的名称完全匹配。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.        我的 content  
    3. 
  
  
  
  
  3.        我的 comments  
    4. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5.   
 
  •  

    • 再次运行：

    使用 Vue 命名插槽有什么意义

    命名槽让我们可以使用多个槽，但是为什么这对我们Vue开发人员有用呢。

    简而言之，它使我们可以更好地组织开发代码，还可以编写更具扩展性的代码。

    就个人而言，我认为最重要的是，它允许我们在代码上使用插槽，从而使样式设计变得更加容易。在我们的示例中，Article.vue子组件只有三个插槽，但是在实际应用中，这些插槽看起来更像这样，以便我们的组件可以向每个部分添加CSS样式。

     
 
 
 
      
  
  
  
  
    1.  
      2.

    在此示例中，更容易理解为什么我们需要多个 slot。由于我们注入的内容是通过不同的

    ，

    和DOM元素彼此分隔的。无法在一个slot中传递所有这些信息。

    如果检查DOM，可以看到使用v-slot的模板将内容正确地插入到正确的位置。

    ~完，我是刷碗智，去刷碗了，下期见!

    作者：Matt Maribojoc 译者：前端小智 来源：stackabuse

    原文：https://learn.co/2021/04/using-vue-named-slots-to-create-multile-template-slots/

    本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

    分享题目：如何使用Vue命名插槽创建多个模板插槽？
    当前链接：http://www.hantingmc.com/qtweb/news38/100888.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    虚拟主机知识

    分类信息网站

    四川绵阳机房　　 　成都网站制作　　 　app网站建设　　 　艾名斯智能　　 　成都网站设计　　 　德阳机房　　 　自适应网页设计　　 　固迪佳新材料　　 　广告媒介投放　　 　成都手机网站建设　　 　四川广汉锦华　　 　重庆服务器托管　　 　成都响应式网站建设公司　　 　自贡主机托管　　 　成都小程序开发公司　　 　成都网页制作　　 　400电话办理　　 　彭州网站建设　　 　香港空间　　 　微信开发