Vue.js|Vue.js slot插槽的作用域插槽用法详解
目录
- 没有插槽的情况
- Vue2.x 插槽
- 有插槽的情况
- 具名插槽
- 没有slot属性
- 插槽简单实例应用
- 作用域插槽 ( 2.1.0 新增 )
- Vue3.x 插槽
- 插槽
- 作用域插槽
没有插槽的情况
1111
模版里的
span标签 会被替代成 “这是一个div标签” 如下图：
文章图片
Vue2.x 插槽
有插槽的情况
简单来说，使用
slot标签 ，可以将1111，放到子组件中想让他显示的地方。如下图：1111
文章图片
即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了
111122223333
文章图片
具名插槽
- 父组件在要分发的标签里添加
slot="xxx"属性 - 子组件在对应分发的位置的
slot标签里，添加name="xxx"属性 - 然后就会将对应的标签放在对应的位置了。如下图：
111122223333
文章图片
没有slot属性
如果子组件标签中没有slot属性，将会显示默认的值
2222
slot="two" 就被插到固定的位置上，如下图：
文章图片
插槽简单实例应用
想想你的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，其模板是template ，如下：
Intel Core i7GTX980TiKingston 32GSamsung SSD 1T
文章图片
作用域插槽 ( 2.1.0 新增 )
作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。
- 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样
- 在父组件中，通过
slot-scope="scoped"的形式，获取子组件传递过来的数据，该数据对象的别名为scoped。这就是作用域插槽的模板。
{{ scoped.myName }}
Vue3.x 插槽
插槽
父组件 子组件
作用域插槽
在 Vue2.x 中具名插槽和作用域插槽分别使用
slot 和 slot-scope 来实现， 在 Vue3.x 中将 slot 和 slot-scope进行了合并统一使用父组件：
{{scoped.myName}}
子组件：
【Vue.js|Vue.js slot插槽的作用域插槽用法详解】 到此这篇关于Vue.js slot插槽的作用域插槽用法详解的文章就介绍到这了,更多相关Vue.js slot插槽的作用域插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue.js|vue中使用axios封装成request使用
- vue.js组件开发
- vue的cli用法
- vue.js|vue.js window.removeEventListener 移除
- vue.js|后端开发学习Vue(一)
- centos7|centos7 redis安装/集群部署/slots迁移
- vue|vue 组件插槽
- vue.js|Vue为何弃用经典的Ajax，选择自研Axios（）
- Vue|Vue3.0的插槽是如何实现的（）