slot属性值_vue中的slot（插槽）
vue中的插槽————slot
什么是插槽？
插槽(Slot)是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
怎么用插槽？
默认插槽
父组件
我是父组件
我是父组件插槽内容
在父组件引用的子组件中写入想要显示的内容(可以使用标签，也可以不用)
子组件(slotOne1)
在子组件中写入slot，slot所在的位置就是父组件要显示的内容
当然再父组件引用的子组件中也可以写入其他组件
父组件
我是父组件
我是父组件插槽内容
子组件(slotOne2)
我是slotOne2组件
具名插槽
子组件
在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer
父组件
我是父组件
啦啦啦，啦啦啦，我是卖报的小行家
我是name为header的slot
我是name为footer的slot
在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置(当然也不用必须写到template)，没有对应值的其他内容会被放到子组件中没有添加name属性的slot中
插槽的默认内容
父组件
我是父组件
子组件
我不是卖报的小行家
可以在子组件的slot标签中写入内容，当父组件没有写入内容时会显示子组件的默认内容，当父组件写入内容时，会替换子组件的默认内容
编译作用域
父组件
我是父组件
{{name}}
export default {
data () {
return {
name： 'Jack'
}
}
}
子组件
作用域插槽
子组件
我是作用域插槽的子组件
export default {
name: 'slotthree',
data () {
return {
user: [
{name: 'Jack', sex: 'boy'},
{name: 'Jone', sex: 'girl'},
{name: 'Tom', sex: 'boy'}
]
}
}
}
在子组件的slot标签上绑定需要的值
父组件
我是作用域插槽
{{item}}
在父组件上使用slot-scope属性，user.data就是子组件传过来的值
slot属性值_vue中的slot（插槽）相关推荐
- slot属性值_Vue入门之slot属性
一开始接触学习slot,比较浅显,以为只是个占位符而已.看了官方文档,好吧,没看明白,翻到了一篇博客,讲的很细,跟着敲了代码,总结下,对了,博客的网址是https://blog.csdn.net/si ...
- slot属性值_深入理解vue中的slot与slot
作者/云荒杯倾 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者 ...
- html中display有哪些属性值,css中display属性是什么及其各个值的作用和用法
当你查看别人写的css代码的时候,经常会看到display:block.none.inline.table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底 ...
- 监听对象中某一项的值_Vue中watch的详细用法
1.基本用法 下面代码是watch的一种基本用法: watch去监听单个值是否发生改变 直接写一个监听处理函数,当每次监听到cityName值发生改变时,执行函数.也可以在所监听的数据后面直接加字符串 ...
- vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
- vue打印props的值_vue中props传值方法
vue中props传值方法 1.开发环境 vue 2.电脑系统 windows10专业版 3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助! ...
- vue点击改变data值_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...
- ajax 返回数组某个属性值,js中sort方法根据数组中对象的某一个属性值进行排序...
1.一维数组排序 timeList=['2017-10-05','2017-10-01','2017-10-03','2017-10-02','2017-10-09']; timeList.sort( ...
- vue如何获取数组中的键值_vue中操作数组的相关方法
1,锁定数组的长度(只读模式)[ Array.join() ] 2.将数组合并成字符串(返回字符串)[ Array.join() ] 3.返回逆序数组(倒叙排列数组)[ Array..reverse( ...
最新文章
- 接入新浪、腾讯微博和人人网的Android客户端实例 接入新浪、腾讯微博和人人网的Android客户端实例...
- 【EventBus】EventBus 源码解析 ( EventBus 构建 | EventBus 单例获取 | EventBus 构造函数 | EventBus 构建者 )
- sql sum嵌套查询+ group by
- 局域网速度变慢的故障分析
- 2017蓝桥杯省赛---java---B---8(包子凑数)
- Cookie和会话Session
- selenium3 + python - js处理readonly属性
- CSDN排名更新又出问题了？
- 寻找影响免疫浸润细胞的基因（一)
- 曲奇云盘资源搜索引擎_曲奇云盘下载-曲奇云盘官网版v3.2.4-sosyes
- golang 数组随机排序
- UIWebView的使用---safri
- 圆弧周长公式_弧长的计算公式是什么？
- 名悦集团国庆出行自驾游攻略
- 【读书笔记-诗词歌赋】诗词积累（一）
- CSS上下左右居中 阿星小栈
- CVPR2021 MotionRNN: A Flexible Model for Video Prediction with Spacetime-Varying Motions
- javascript之内置函数
- 拒绝跟风，谈谈几种算法岗的区别和体验
- Java中获取内存地址