组件：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这样子 ...
随机推荐
- 用VC生成 IDispatch 包装类
1.创建包装类:View->ClassWizard->Add Class->Add Class From ActiveX Control Wizard 2 .选中Registry 3 ...
- 解决方案 -SQL脚本建表产生ORA-00942错误
一.问题简介 1.开发环境 操作系统:win10 数 据 库:Oracle11g 数据库连接工具:Navicat Premium 2.问题简述 在使用SQL Development.Navicat ...
- 引用第三方 chalk 模块
第三方模块没有默认引用到我们的电脑中,我们要进行下载 chalk 这个包是为了使输出不再单调,添加文字背景什么的,改变字体颜色什么的, npm install chalk //只需要写文件包名,不需要 ...
- vue之样式问题
在样式开发过程中,有两个问题比较突出: 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖: 选择器复杂 — ...
- 滑雪 矩阵中的最长上升路径 /// 记忆化DFS || DP oj22919
大致题意: Description 难怪Michael喜欢滑雪,因为滑雪确实很刺激.为了获得加速度,滑雪道必须向下倾斜,而且当滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道在一 ...
- sparkStreaming结合sparkSql进行日志分析
package testimport java.util.Propertiesimport org.apache.spark.SparkConfimport org.apache.spark.Spar ...
- 创建 linuxrc 文件
创建 linuxrc,加入如下内容: [arm@localhost my_rootfs]#vi linuxrc #!/bin/sh #挂载/etc 为 ramfs, 并从/mnt/etc 下拷贝文件到 ...
- Invalid prop: type check failed for prop "maxlength". Expected Number, got String.
1.项目中,使用element-ui的input表单的maxlength属性报错 2.使用场景: <el-input v-model="fname" maxle ...
- 【转载】linux进程及进程控制
Linux进程控制 程序是一组可执行的静态指令集,而进程(process)是一个执行中的程序实例.利用分时技术,在Linux操作系统上同时可以运行多个进程.分时技术的基本原理是把CPU的运行时间划 ...
- day06 tar命令使用，vim简单操作以及linux开机过程
上节课复习: cat: 查看全部文件内容 head: 从头查看文件内容,默认为前10行 tail: tail -f //动态查看文件是否增加内容 >> 追加 > 覆盖 more: 百 ...