插槽和具名插槽的使用

作者:神秘网友 发布时间:2020-10-31 18:44:16

插槽和具名插槽的使用

插槽和具名插槽的使用

插槽和具名插槽的使用
首先我们先注册一个组件然后在#app内部使用

html:
<div id="app">
        <cpn></cpn>
        <br>
        <cpn>
            <button>按钮</button>
        </cpn>
        <br>
        <cpn>
            <input type="text" placeholder="请输入名字">
        </cpn>
        <br>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h3>我是标题</h3>
            <p>我是内容</p>
            <slot>
                <!-- 这里的p标签时一个默认的标签,因为页面需要p标签比较多 -->
                <p>张益达</p>
            </slot>
        </div>
    </template>
js:
 const app = new Vue({
            el:"#app",
            data:{

            },
            components:{
                cpn:{
                    template:"#cpn"
                }
            }
        })

要注意,当我们使用插槽的时候在注册组件内部也就是template内部添加一个<slot></slot>这个标签

当我们页面需要多个重复内容的时候,我们可以在slot标签内部写一个默认的标签(就是你页面过多重复的标签)

<cpn></cpn>默认就显示<slot></slot>标签里的内容

如果你想使用其他标签可以直接在<cpn></cpn>标签内部添加,可以直接覆盖<slot></slot>标签内部的标签

具名插槽的使用
其实具名插槽和普通的插槽并没有太大的差别,无非就是给注册组建中<slot></slot>标签添加一个name属性,在<cpn></cpn>标签内部更改的时候在添加标签内部添加一个name属性进行修改。

 <div id="app">
        <cpn>
            <span slot="left">返回</span>
            <span slot="content">标题</span>
            <span slot="right">详情</span>
        </cpn>
        <br>
        <cpn>
            <button>按钮</button>
        </cpn>
        <br>
        <cpn>
            <input type="text" placeholder="请输入名字">
        </cpn>
        <br>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h3>我是标题</h3>
            <p>我是内容</p>
            <slot>
                <!-- 这里的p标签时一个默认的标签,因为页面需要p标签比较多 -->
                <p>张益达</p>
            </slot>
            <slot name="left">左边</slot>
            <slot name="content">中间</slot>
            <slot name="right">右边</slot>
        </div>
    </template>

这个时候页面原本左边、中间、右边就改成了返回、标题、详情
以上就是具名插槽的使用

以下是所有的代码和效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn>
            <span slot="left">返回</span>
            <span slot="content">标题</span>
            <span slot="right">详情</span>
        </cpn>
        <br>
        <cpn>
            <button>按钮</button>
        </cpn>
        <br>
        <cpn>
            <input type="text" placeholder="请输入名字">
        </cpn>
        <br>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h3>我是标题</h3>
            <p>我是内容</p>
            <slot>
                <!-- 这里的p标签时一个默认的标签,因为页面需要p标签比较多 -->
                <p>张益达</p>
            </slot>
            <slot name="left">左边</slot>
            <slot name="content">中间</slot>
            <slot name="right">右边</slot>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{

            },
            components:{
                cpn:{
                    template:"#cpn"
                }
            }
        })
    </script>
</body>
</html>

插槽和具名插槽的使用
如有问题请及时联系,也好及时更改,谢谢!

插槽和具名插槽的使用相关教程

  1. react+ts项目中使用jexcel,单元格合并

    react+ts项目中使用jexcel,单元格合并 遇到的问题 1.jexcel 的导入出问题 2.初始化jexcel表格dom节点的获取问题 3.jexcel初始化返回jexcel对象没有获取到的 4.在对代码进行更改后,热更新之后页面会出现多个表格 因为公司做的项目用到了jexcel,今天我的师傅

  2. 使用GridsearchCV时The truth value of an array with more than

    使用GridsearchCV时The truth value of an array with more than one element is ambiguous. 我正在尝试在 python 中使用 scikit-learn 进行分类 。我生成了数据,将其拆分以进行训练和测试,并在模型clf使用了它。 我接下来打算做的是使用 sklearn.model_sel

  3. Oracle VM VirtualBox虚拟机使用问题总结

    Oracle VM VirtualBox虚拟机使用问题总结 我本机的配置是Ubuntu 18.04 +OracleVMVirtualBox虚拟机 (6.1.12) + 虚拟win7操作系统,对虚拟机了解甚少,以下仅为一些实践中的经验: 一、升级后屏幕分辨率问题 最近按照提示将virtaulbox升级到6.1.14,完成后装上

  4. 20201030使用jvisualvm排查内存溢出(OOM)过程

    20201030使用jvisualvm排查内存溢出(OOM)过程 内存溢出在开发中或者线上出现的概率很高,造成的直接结果是系统运行缓慢,或者直接宕机。 在这里模拟下内存溢出的情况以防患于线上出现内存溢出要如何排查问题,线上出问题需要生成一个快照(hprof文件),在

  5. MultiValueMap的使用 和一个键多个值的理解

    MultiValueMap的使用 和一个键多个值的理解 源代码 MultiValueMapString, String multiValueMap =new LinkedMultiValueMap(); multiValueMap.add(aa,aa); multiValueMap.add(aa,bb); multiValueMap.add(aa,cc); multiValueMap.add(aa,dd); multiValueMap.add(

  6. Linux中使用GDB调试程序

    Linux中使用GDB调试程序 gdb的简介及在linux中的使用 一、gdb简介及常用命令介绍 二、gdb调试实例 1、什么是gdb GDB : GNU Debugger,是GNU工程为GNU操作系统开发的 调试器,但它的使用不局限于GNU操作系统, GDB可以运行 在UNIX、Linux甚至Microsoft Window

  7. 如何使用 IntelliJ IDEA 构建父/子工程类型的Maven项目

    如何使用 IntelliJ IDEA 构建父/子工程类型的Maven项目 如何使用 IDEA 构建父/子工程类型的Maven项目 在一家公司里开发,很多项目中使用的jar包80%都是重复的,如果每个项目都要把pom.xml文件的这些依赖包复制过来,或是后期出现统一的版本升级,那修改起来是

  8. unity3D 编辑器扩展,GUISkin/GUIStyle的简单使用

    unity3D 编辑器扩展,GUISkin/GUIStyle的简单使用 GUISkin是基本所有样式的集合,可以作为一种配置资源。如果开发者需要自定义大量的GUIStyle,可以通过GUISkin配置资源来定义,并且开发者可以在Inspector面板中直接修改样式。 Unity 中的GUI Skin 在Unity中