• vue（十）——插槽slot

    摘要

            简单来说插槽就是一个占位的标签，当父组件传递进来内容后就会把这个占位标签替换掉。插槽是由于有时组件的要求不一样，为了组件的更多扩展性而进行的一种功能。

            插槽主要分为三种：普通插槽（匿名插槽）、具名插槽和作用域插槽。今天主要记录普通插槽和具名插槽；由于距离学习时间有一年多了，作用域插槽放到后面复习后多理解一下再进行记录。

    1、普通插槽

            vue的插槽是使用标签来进行定义的。具体使用方法如下：（由于只是演示插槽的使用，为了在一个页面直观的显示，并没有用vue-cli）

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>Documenttitle>
    5. head>
    6.  
    7. <body>
    8.     <div id="app">
    9.         
    10.         <cpn>cpn>
    11.         
    12.         <cpn><button>替换默认button>cpn>
    13.         
    14.         <cpn>
    15.             <button>按钮button>
    16.             <p>多元素替换p>
    17.             <button>按钮button>
    18.         cpn>
    19.     div>
    20.     <template id="cpn">
    21.         <div>
    22.             <h2>插槽使用h2>
    23.             <p>插槽是由于有时组件的要求不一样，为了组件的更多扩展性p>
    24.             <slot><h6>默认值h6>slot>
    25.         div>
    26.     template>
    27.     <script src="../node_modules/vue/dist/vue.js">script>
    28.     <script>
    29.         const app = new Vue({
    30.             el: "#app",
    31.             data: {
    32.  
    33.             },
    34.             components: {
    35.                 cpn: {
    36.                     template: "#cpn",
    37.                 }
    38.             }
    39.         });
    40.     script>
    41. body>
    42.  
    43. html>

    结果：

     由上述代码和结果可以看出：

    1、如果组件中并无传递，插槽会使用默认值，此时也可以把插槽就当做一个div标签

    2、插槽可以使用一个标签进行替换，也可以使用多个标签进行替换

    2、具名插槽

            具名插槽就是给插槽加上一个属性，可以确定你要替换的是哪一部分

            例如我们一个项目可能多处需要用到nav组件，但是nav组件有些页面是在中间显示，有些页面是左中右布局，有些页面是左右或者中右布局，这里就可以使用具名插槽来解决。使用方法如下：

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>Documenttitle>
    5. head>
    6.  
    7. <body>
    8.     <div id="app">
    9.         <h1>默认h1>
    10.         <cpn>cpn>
    11.         <br>
    12.         <br>
    13.         <hr>
    14.         
    15.         <h1>替换h1>
    16.         <cpn>
    17.             <span slot="center">中间替换span>
    18.         cpn>
    19.         <cpn>
    20.             <button slot="left">左边替换button>
    21.         cpn>
    22.     div>
    23.     <template id="cpn">
    24.         <div>
    25.             
    26.  
    27.             <slot name="left">左边slot>
    28.             <slot name="center">中间slot>
    29.             <slot name="right">右边slot>
    30.         div>
    31.     template>
    32.     <script src="../node_modules/vue/dist/vue.js">script>
    33.     <script>
    34.         const app = new Vue({
    35.             el: "#app",
    36.             data: {
    37.  
    38.             },
    39.             components: {
    40.                 cpn: {
    41.                     template: "#cpn"
    42.                 }
    43.             }
    44.         });
    45.     script>
    46. body>
    47.  
    48. html>

    结果：

     由上可以看出，具名插槽可以使用更多的组合进行显示，可以有选择的进行替换。

  • 相关阅读:
    【数据结构】B树（B-树）和B+树
    文本分类从入门到精通，代码整理。
    Spring Boot、Spring MVC 和 Spring Cloud 深度解析
    很久没写JAVA程序了，原来用GMAIL发送邮件这么简单
    HBUILDER vue启动失败
    2015-04《信息资源管理 02378》真卷解析，逐题解析+背诵技巧
    微服务从代码到k8s部署应有尽有系列（二、网关）
    为何要实现发票信息的数字化管理？
    MySQL根据备注查询表、字段
    【2013年数据结构真题】
  • 原文地址：https://blog.csdn.net/qq_43957263/article/details/126212887