Vue - 内置组件 -slot 父组件向子组件传值

最新推荐文章于 2024-08-22 11:25:48 发布

xiaohanzhu000

最新推荐文章于 2024-08-22 11:25:48 发布

阅读量6k

点赞数

分类专栏：前端开发 VUE

本文链接：https://blog.csdn.net/xiaohanzhu000/article/details/80897428

版权

前端开发同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

VUE

20 篇文章 0 订阅

订阅专栏

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。

先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。

我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
        data 
        : 
        { 
       
        jspangData 
        : 
        { 
       
        bolgUrl 
        : 
        'http://jspang.com' 
        , 
       
        netName 
        : 
        '技术胖' 
        , 
       
        skill 
        : 
        'Web前端' 
       
        } 
       
        } 
        ,

我们用<template></template>标签的方式定义了组件：

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
        <template  
        id 
        = 
        "tmp" 
        > 
       
        <div> 
       
        <p> 
        博客地址： 
        </p> 
       
        <p> 
        网名： 
        </p> 
       
        <p> 
        技术类型： 
        </p> 
       
        </div> 
       
        </template>

我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。

slot的使用需要两步：

1、在HTML的组件中用slot属性传递值。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
        <jspang> 
       
        <span  
        slot 
        = 
        "bolgUrl" 
        > 
        {{jspangData.bolgUrl}} 
        </span> 
             
        <span  
        slot 
        = 
        "netName" 
        > 
        {{jspangData.netName}} 
        </span> 
             
        <span  
        slot 
        = 
        "skill" 
        > 
        {{jspangData.skill}} 
        </span> 
             
        </jspang>

2、在组件模板中用<slot></slot>标签接收值。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
        <template  
        id 
        = 
        "tmp" 
        > 
       
        <div> 
       
        <p> 
        博客地址： 
        <slot  
        name 
        = 
        "bolgUrl" 
        > 
        </slot> 
        </p> 
       
        <p> 
        网名： 
        <slot  
        name 
        = 
        "netName" 
        > 
        </slot> 
        </p> 
       
        <p> 
        技术类型： 
        <slot  
        name 
        = 
        "skill" 
        > 
        </slot> 
        </p> 
       
        </div> 
       
        </template>

我们贴出这个案例的全部代码：

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
         24 
       
         25 
       
         26 
       
         27 
       
         28 
       
         29 
       
         30 
       
         31 
       
         32 
       
         33 
       
         34 
       
         35 
       
         36 
       
         37 
       
         38 
       
         39 
       
         40 
       
         41 
       
         42 
       
         43 
       
         44 
       
         45 
       
         46 
       
         47 
       
         48 
       
         49 
       
        <!DOCTYPE html> 
       
        <html  
        lang 
        = 
        "en" 
        > 
       
        <head> 
       
        <meta  
        charset 
        = 
        "UTF-8" 
        > 
       
            <script type="text/javascript" src="../assets/js/vue.js"></script> 
       
        <title> 
        Slot content extend Demo 
        </title> 
       
        </head> 
       
        <body> 
       
        <h1> 
        Slot content extend Demo 
        </h1> 
       
        <hr> 
       
        <div  
        id 
        = 
        "app" 
        > 
       
        <jspang> 
       
        <span  
        slot 
        = 
        "bolgUrl" 
        > 
        {{jspangData.bolgUrl}} 
        </span> 
             
        <span  
        slot 
        = 
        "netName" 
        > 
        {{jspangData.netName}} 
        </span> 
             
        <span  
        slot 
        = 
        "skill" 
        > 
        {{jspangData.skill}} 
        </span> 
             
        </jspang> 
       
        </div> 
       
        <template  
        id 
        = 
        "tmp" 
        > 
       
        <div> 
       
        <p> 
        博客地址： 
        <slot  
        name 
        = 
        "bolgUrl" 
        > 
        </slot> 
        </p> 
       
        <p> 
        网名： 
        <slot  
        name 
        = 
        "netName" 
        > 
        </slot> 
        </p> 
       
        <p> 
        技术类型： 
        <slot  
        name 
        = 
        "skill" 
        > 
        </slot> 
        </p> 
       
        </div> 
       
        </template> 
       
            <script type="text/javascript"> 
       
        var 
          
        jspang 
        = 
        { 
       
        template 
        : 
        '#tmp' 
       
        } 
       
        var 
          
        app 
        = 
        new 
          
        Vue 
        ( 
        { 
       
        el 
        : 
        '#app' 
        , 
       
        data 
        : 
        { 
       
        jspangData 
        : 
        { 
       
        bolgUrl 
        : 
        'http://jspang.com' 
        , 
       
        netName 
        : 
        '技术胖' 
        , 
       
        skill 
        : 
        'Web前端' 
       
        } 
       
        } 
        , 
       
        components 
        : 
        { 
       
        "jspang" 
        : 
        jspang 
       
        } 
       
        } 
        ) 
       
        </script> 
       
        </body> 
       
        </html>