首页 > 其他分享 >VUE学习-插槽

VUE学习-插槽

时间:2022-08-17 10:27:10浏览次数:70  
标签:传参 VUE 插槽 具名 学习 第一行 第二行 组件

插槽

匿名插槽

  • 子组件设置匿名插槽

    <script type="text/x-template" id="custom-comp">
        <div class="custom-comp-container">
            <h2>{{title}}</h2>
            <slot></slot>
        </div>
    </script>
    
  • 父组件引入子组件

    知识点:

    1. 父组件向子组件传参
    2. 具化匿名插槽
    <custom-comp title="标题">
        <template>
            <p>第一行。。。</p>
            <p>第二行。。。。</p>
        </template>
    </custom-comp>
    

具名插槽

  • 子组件设置具名插槽

    <script type="text/x-template" id="custom-comp">
        <div class="custom-comp-container">
            <h2>{{title}}</h2>
            <slot name="warpper"></slot>
        </div>
    </script>
    
  • 父组件引入子组件

    知识点:

    1. 父组件向子组件传参
    2. 具化具名插槽
    <custom-comp title="标题">
        <template v-slot="wrapper">
            <p>第一行。。。</p>
            <p>第二行。。。。</p>
        </template>
    </custom-comp>
    
    <custom-comp title="标题">
        <template #wrapper>
            <p>第一行。。。</p>
            <p>第二行。。。。</p>
        </template>
    </custom-comp>
    

子组件通过插槽向父组件传参

  • 子组件设置具名插槽

    <script type="text/x-template" id="custom-comp">
        <div class="custom-comp-container">
            <h2>{{title}}</h2>
            <slot name="warpper" v-bind:props="props"></slot>
        </div>
    </script>
    
  • 父组件引入子组件

    知识点:

    1. 父组件向子组件传参
    2. 具化具名插槽
    3. 接收子组件传回来的参数: slotProps
    <custom-comp title="标题">
        <template v-slot:wrapper="slotProps">
            <p>第一行。。。</p>
            <p>第二行。。。。</p>
            <p>参数: {{slotProps.props}}</p>
        </template>
    </custom-comp>
    
    <custom-comp title="标题">
        <template #wrapper="slotProps">
            <p>第一行。。。</p>
            <p>第二行。。。。</p>
        </template>
    </custom-comp>
    

标签:传参,VUE,插槽,具名,学习,第一行,第二行,组件
From: https://www.cnblogs.com/-LemonWater-/p/16594049.html

相关文章

  • 汇编语言-王爽第四版,学习资料和姿势
    'debug'不是内部或外部命令,也不是可运行的程序或批处理文件。debug:无法将“debug”项识别为cmdlet、函数、脚本文件或可运行程序的名称。windows,win10,win11找不到......
  • 048_末晨曦Vue技术_处理边界情况之使用$root访问根实例
    处理边界情况之使用$root访问根实例点击打开视频教程在每个newVue实例的子组件中,其根实例可以通过$rootproperty进行访问。例如,在这个根实例中:src\main.jsimpo......
  • vue-router
    路由基本使用//main.jsimport{createRouter,createWebHistory}from'vue-router'importHomeViewfrom'../views/HomeView.vue'importAboutViewfrom'../views/Ab......
  • 【深度学习】| 线性回归的简单实现
    1概述本文的主要目的是通过实现最简单的线性回归模型,理解pytorch在数据导入、模型定义、、损失计算、优化迭代、自动求导和批次训练等方面的特点。2数据导入首先,生成......
  • vue页面实现文本关键字检索,关键字高亮显示及定位功能
    <template><divid="app"><divclass="container"><divclass="header"><inputtype="text"v-model="keyword"><divclass="match-num">{{c......
  • 22/8/17 python基础学习
    python语法基础python解释器提供一个traceback,指出解释器尝试运行代码时的错误信息。第二章变量和简单数据类型在字符串中使用变量:f字符串:实例代码:first_name="ada......
  • MySQL45讲学习-基础构架查询和更新一条sql语句
    一、基础构架1.概述MySQL可以分为Server层和存储引擎层两部分,Server层包括连接器、查询缓存、分析器、优化器、执行器等,涵盖MySQL的大多数核心服务功能,以及所......
  • vue学习之------自定义指令(全局)
    main.js中定义:定义指令的函数为:directive()指令名称:第一个参数------fontcolor被绑定的元素:回调函数的第一个参数------el指令被设置的具体值:回调函数的第二个参数----......
  • Java 学习笔记4
    面向对象&面向过程面向过程思想步骤清晰简单,一步接一部面向过程适合处理一些简单的问题面向对象思想物以类聚,分类的思维模式,先思考问题会解决哪些问题,然后对问题进......
  • 个人学习-Linux-IO多路复用
    LinuxI/O的多路复用参考链接:[1]confirmwz博客:Epoll原理解析https://blog.csdn.net/armlinuxww/article/details/92803381;[2]hechen知乎专栏:一文看懂IO多路复用https:......