Vue之slot分发内容
来源:互联网 发布:计算机代码编程 编辑:程序博客网 时间:2024/05/20 16:41
在单页面应用中,例如头部header组件,在不同的页面显示的可能内容不同,例如在下列选择城市和搜索城市页面的header组件内容便显示的不一样,图片如下:
一、
二、
这里用slot十分合适,header组件仅仅定义大小和背景,里面不添加任何内容通过slot来分发,在调用header的A组件里面使用slot定义分发该页面对应的内容,然后当A组件在页面中显示时,header组件里显示A组件里slot分发的内容,如下:
一、选择城市组件select.vue:
template:
<headVue> <span slot="logo-name">饿了么</span> <img src="../../common/img/head-logo.png" slot="logo"></headVue>
二、搜索地址组件research.vue:
template:
<headVue> <router-link to="/select" slot="back"> <span><</span> </router-link> <span slot="logo-name" class="research">搜索</span></headVue>
三,header组件里通过slot的name属性来显示相应内容:
template:
<div class="head-wrap"> <slot name="logo-name"></slot> <slot name="logo"></slot> <slot name="back"></slot> <slot name="research"></slot></div>
上面在header组件里写四个slot并给不同的name是为了看的更清楚,其实不必如此,因为我们两个组件各自内部只用到了两个slot来分发内容,所以header组件里只需要写两个slot即可。
这里说明一下,当前组件A加载(或显示)在网页上时,A组件内slot分发的内容才会才header组件里显示,而组件A没有被当前网页显示时,A组件内slot分发的内容自然也不会在header组件里显示,所以上面代码可以稍加简化:
一、选择城市组件select.vue:
template:
<headVue> <span slot="A">饿了么</span> <img src="../../common/img/head-logo.png" slot="B"></headVue>
二、搜索地址组件research.vue:
template:
<headVue> <router-link to="/select" slot="A"> <span><</span> </router-link> <span slot="B" class="research">搜索</span></headVue>
三,header组件里通过slot的name属性来显示相应内容:
template:
<div class="head-wrap"> <slot name="A"></slot> <slot name="B"></slot></div>
阅读全文
0 0
- Vue之slot内容分发
- Vue之slot分发内容
- vue slot内容分发
- vue slot 内容分发
- vue之组件 slot内容分发
- vue 使用Slot 分发内容
- vue组件——slot分发内容
- 理解VUE的slot内容分发
- 使用Vue开发网站之路3-slot内容分发实现基础表单,衍生表单
- vue使用插槽分发内容slot的用法
- Slot分发内容
- 常用js框架之vue.js(深入四:组件2,slot内容分发,编译作用域,动态切换组件)
- Vue.js的组件(五)分发 之 单个Slot
- Vue.js的组件(六)分发 之 具名Slot
- Vuejs组件之slot内容分发实例详解
- vuejs组件之slot内容分发实例详解
- Vue.js-----轻量高效的MVVM框架(使用slot分发内容)
- Vue.js-----轻量高效的MVVM框架(使用slot分发内容)
- 1
- JUnit4 基础
- spring boot整合quartz实现多个定时任务
- 怎么解决python "Non-ASCII character"错误?
- 正确引入aar项目之后,发生资源冲突的现象
- Vue之slot分发内容
- linux 读者写着问题
- Djongo页面文件上传,调用静态文件资源
- java中登录验证码的使用
- SQL server 2000服务MSSQLSERVER无法启动解决办法
- Git在mac中和远程仓库建立连接
- 机器学习_隐马尔可夫模型HMM
- 回首2017,盘点最优秀的10大Linux发行版
- git创建分支