具名插槽 slot (二)
slot 是父组件与子组件的通信方式
可以将父组件的内容显示在子组件当中
或者说可以将 让你封装的组件变的更加的灵活,强壮!
在子组件中 通过为多个slot进行命名。来接受父组件中的不同内容的数据 这就是命名插槽
插槽slot与slot之间不能有html元素
但是html可以把插槽包裹起来
所以插槽可以动态向子组件传递值
子组件
父组件
<template>
<div>
<!-- 第一种 -->
<slotexmple>
<div slot="wang">我是第三个插槽</div>
</slotexmple>
</div>
</template> <script>
import slotexmple from "../../components/slot-exmple";
export default {
data() {
return {};
},
components: {
slotexmple
}
};
</script>
具名插槽 slot (二)的更多相关文章
- vue中的插槽slot
插槽(slot):是组件的一块HTML模板,父组件决定这块模板显不显示以及怎么显示. 位置由子组件自身决定(slot现在组件template的什么位置,父组件传过来的模板将来就显示在什么位置) 匿名插 ...
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...
- vue(基础二)_组件,过滤器,具名插槽
一.前言 主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
- [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- vue插槽slot的理解与使用
一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...
- Vue中的插槽---slot
一:什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 插槽显不显示.怎样显示是由 ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- vue中具名插槽的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在vue中使用插槽 slot
插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...
随机推荐
- python while语句
一.while 1.while 死循环 f=True while f: print(1) print(2) 2.while 活循环 ①.正序 count = 1 while count <= 5 ...
- vs code 运行 Django 怎么修改端口
1.具体操作步骤如下 默认情况下,通过 python manage.py runserver 命令行模式默认打开是 8000 端口,如下图所示: 在浏览器预览效果如下: 为了防止端口冲突,我们一般会修 ...
- Redis—简介与安装
Redis 简介 Redis 安装 Redis 配置文件 # Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程.daemonize yes # 当Redis以守护进 ...
- 关于学习和开发Android的一点体会
在谷歌中国安卓开发官网的 https://developer.android.google.cn/guide 之下有许多开发资料,有讲解,和例子.分门别类很清楚. 在 https://develope ...
- spring mongodb用法
A field annotated with @Id (org.springframework.data.annotation.Id) will be mapped to the '_id' fiel ...
- JDBC数据库连接(二)
要想在编程语言中操作数据库,就必须与数据库建立连接. 建立JDBC连接的步骤如下: 导入JDBC包:使用Java语言的import语句在Java代码开头位置导入所需的类. 注册JDBC驱动程序:使JV ...
- 【AtCoder】AtCoder Grand Contest 040 解题报告
点此进入比赛 \(A\):><(点此看题面) 大致题意: 给你一个长度为\(n-1\).由\(<\)和\(>\)组成的的字符串,第\(i\)位的字符表示第\(i\)个数和第\( ...
- 将scrapy爬取数据通过django入到SQLite数据库
1. 在django项目根目录位置创建scrapy项目,django_12是django项目,ABCkg是scrapy爬虫项目,app1是django的子应用 2.在Scrapy的settings.p ...
- 【linux命令】权限管理命令(chattr、lsattr、sudo)
目录 chattr lsattr sudo 一.chattr命令 chattr命令用来修改文件系统的权限属性,只有 root 用户可以使用,建立凌驾于 rwx 基础权限之上的授权. PS:chattr ...
- RST Methodology: “Responsible Tester”
翻译另一篇James Bach的关于快速软件测试的文章,原文链接:http://www.satisfice.com/blog/archives/1364 在快速软件测试方法论中,我们区分出三种主要角色 ...