slot 是父组件与子组件的通选方式
可以将父组件的内容显示在子组件当中
或者说可以将 让你封装的组件变的更加的灵活,强壮!

组件 slot-exmple.vue
<template>
<div>
<h1>我是组件</h1>
<h2>我是组件中显示的内容</h2>
<slot></slot>
</div>
</template> <script>
export default {};
</script>
父组件
<template>
<div>
<slotexmple>
<div>我是插入进去的</div>
</slotexmple>
</div>
</template> <script>
import slotexmple from "../../components/slot-exmple";
export default {
data() {
return {};
},
components: {
slotexmple
}
};
</script>

slot 的简单使用(一)匿名插槽的更多相关文章

  1. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  2. Vue基础-匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...

  3. 034-PHP简单定义一个匿名函数

    <?php /* 简单定义一个匿名函数 */ # 把匿名函数赋值给一个变量,也叫临时函数 $demo = function ($txt) { echo $txt; }; # 调用测试下 $dem ...

  4. Vue 插槽 slot的简单实用

  5. 简单介绍Javascript匿名函数和面向对象编程

    忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...

  6. 牛客网Java刷题知识点之匿名对象、匿名对象的内存结构图、匿名对象的应用场景、匿名对象的使用、匿名对象的简单例子、匿名对象要注意的事项

    不多说,直接上干货! 什么是匿名对象? 答: 没有名字的实体,也就是该实体没有对应的变量名引用.  没有名字的实体,没有引用类型变量指向的对象称作为匿名对象. 正常的,是 Car car = new ...

  7. ASP.NET中cookie与Fiter实现简单登陆,AllowAnonymous匿名登陆

    向服务器发送cookie 在登陆的时候,我们可以可以通过下列代码,向服务器发送cookie,其中包括自己的账号信息(不涉及加密),用以后面判断访问者. HttpCookie cookie = new ...

  8. python 用lambda表达式代替简单的函数, 匿名函数

    lambda 函数是一种快速定义单行的最小函数,可以用在任何需要函数的地方 格式: lambda 参数列表:return [表达式] 变量 由于lambda返回的是函数对象(构建的是一个函数对象),所 ...

  9. 小程序的组件插槽使用slot===以及小程序多个插槽使用方法 三步骤

    ===================== 小程序多个插槽使用方法 三步骤 小程序多个插槽第一步 小程序组件内使用多个插槽第二部 小程序使用多个插槽第三部

随机推荐

  1. Docker中进入容器命令行及后台运行

    Docker中我们一般会有两种执行命令的方式,一种是直接进入容器的命令行,在终端执行并查看结果,一种是在后台执行,并不会在终端查看结果. 1.进入容器命令行 su root docker run -i ...

  2. Python踩坑系列之安装pycrypto报错:“Microsoft Visual C++14.0 is required”问题。

    由于要使用Python3实现des3加密要使用pycrypto模块,所以使用pip install pycrypto 来安装,然后就常规性掉坑.安装报错“Microsoft Visual C++14. ...

  3. number.toFixed和Math.round与保留小数

    如果你baidu/google过或者自己写过保留两位小数,那下面这代码一定不陌生 Math.round(number*100)/100 那你使用过Number.prototype.toFixed这个方 ...

  4. Vue 组件通信的多种方式(props、$ref、$emit、$attr、 $listeners)

    prop和$ref之间的区别: prop 着重于数据的传递,它并不能调用子组件里的属性和方法.像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop. $ref 着重于索引,主要用来调用 ...

  5. 【51nod1253】Kundu and Tree(容斥+并查集)

    点此看题面 大致题意: 给你一棵树,每条边为黑色或红色, 求有多少个三元组\((x,y,z)\),使得路径\((x,y),(x,z),(y,z)\)上都存在至少一条红色边. 容斥 我们可以借助容斥思想 ...

  6. Codeforces Round #603 (Div. 2) C. Everyone is a Winner! 二分

    C. Everyone is a Winner! On the well-known testing system MathForces, a draw of n rating units is ar ...

  7. Java连载47-多态基础语法、作用

    一.多态的语法 1.两个类之间没有继承关系的,使用多态是不能编译的. 2.无论向上还是向上转型,都需要有继承关系. 3.什么时候需要向下转型? 当调用的方法或者属性是子类型特有的,在父类型中不存在,就 ...

  8. PVANET: Deep but Lightweight Neural Networks for Real-time Object Detection

    URL: https://arxiv.org/abs/1608.08021 year: 2016 TL;DR PVANet 一个轻量级多物体目标检测架构, 遵循 "less channels ...

  9. C# get files and write the files full name in txt

    static void GetAllFiles() { string path = "filepath"; var allFiles = Directory.GetFiles(pa ...

  10. Java生鲜电商平台-IntelliJ IDEA 最新注册码,亲测可用

    2019年IntelliJ IDEA 最新注册码(截止到2020年3月11日) 操作步骤: 第一步:  修改 hosts 文件 ~~~ 在hosts文件中,添加以下映射关系: 0.0.0.0 acco ...