组件：slot插槽
<!DOCTYPE html>
<html lang="zh"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="../css/style.css" rel="stylesheet"> </head>
<body>
<div id="myApp">
<say-to pname="koma">
你的视频做的太差了。
</say-to>
<say-to pname="mike">
你千万不要学koma。
</say-to>
<say-to pname="john">
你教教他们两个吧。
</say-to>
</div>
<script>
Vue.component('say-to', {
props: ['pname'],
template: '<div>'
+ '你好，<strong>{{pname}}</strong>！'
+ '<slot></slot>'
+ '</div>',
});
var myApp = new Vue({
el: '#myApp',
});
</script>
</body> </html>
slot
slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中。
组件：slot插槽的更多相关文章
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- 8.Vue组件三---slot插槽
主要内容: 1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...
- Vue slot 插槽用法：自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- Vue slot插槽
插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...
- vue slot插槽的使用
slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定 注:想要修改父组件向子 ...
- Vue slot插槽内容分发
slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
- vue中的slot插槽
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...
- slot 插槽的使用
在vue 中父组件中的子组件在子组件中添加内容(html标签.文本内容),在子组件中加入slot这样页面中就会呈现出在父组件填写的内容,例如: 父组件中hello是子组件,在子组件中插入slot这样子 ...
随机推荐
- JavaScript中的浏览器对象模型
浏览器对象模型 1.浏览器引入JavaScript 1.直接在HTML文件中引入 首先第1种方式就是直接在HTML文档里面引入JavaScript代码.在维护一些老项目的时候,经常 可以看到J ava ...
- System.Web.Mvc.HttpPutAttribute.cs
ylbtech-System.Web.Mvc.HttpPutAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, P ...
- 第十一篇：一点一滴学ibatis（一）
一.常见ORM框架1.原生的JDBC.自己写的JDBC,基本上就只够程序跑起来,缺陷和漏洞一堆堆.回顾下jdbc的几个操作,加载驱动,建立连接,预处理语句,执行,结果集遍历.这个过程中,因为连接Con ...
- NEERC 1999 Divisibility /// 同余DP oj22640
题目大意: 输入n,m: ( 1 ≤ N ≤ 10000, 2 ≤ M ≤ 100 ) 接下来n个数:Each integer is not greater than 10000 by it's ab ...
- iOS逆向系列-Mach-O文件
概述 Mach-O是Mach object的缩写,是Mac\iOS上用于存储程序.库的标准格式. 常见的Mach-O文件 属于Mach-O格式的文件类型有. 可以在xnu源码中,查看到Mach-O格式 ...
- Python全栈开发：选课系统实例
程序目录: bin文件夹下为可执行文件:administrator,students config文件夹下为设置文件,涉及系统参数配置:setting db文件夹为数据类文件,涉及系统的输入输出数据: ...
- 导入excel并进行数据提取
/** * @description: 导入excel并进行数据提取 * @param {type} * @return: */ Vue.prototype.$importExcel = functi ...
- 容斥原理——状态压缩zoj3233 zoj2836升级版
zoj2836就是裸的求lcm进行容斥,用dfs比较直观 zoj3233增加了一个集合b,lcm(b)的倍数是不符合条件的 那么在zoj2836的基础上,把lcm(x,lcm(b))造成的影响减去即可 ...
- 用React实现一个自动生成文章目录的组件
原文地址:小寒的博客 功能介绍 这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点 正则 do ...
- 网络工程师课程---3、IP与路由器（ip地址的主要作用是什么）
网络工程师课程---3.IP与路由器(ip地址的主要作用是什么) 一.总结 一句话总结: 用来标识一个节点的网络地址 划分网段 1.如何得到ip地址的网段号? ip和子网掩码 化成二进制后取 与运算 ...