vue slots 组件的组合/分发实例


Posted in Javascript onSeptember 06, 2018

使用slots 分发内容

使用组件时常常会有组件组合使用的情况,如下:

<componentA>
<componentB></componentB>
<componentC></componentC>
</componentA>

直接套用组件的话,父级组件会将子级组件覆盖掉,不能实现需求的效果,为了实现该效果就需要使用 slots来内容分发

slots的使用方法如下:

<body>
 <div id="app">
 <app>
  <child></child>
  <child2></child2>
 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot>没有则显示这个</slot>\
  <li>111</li>\
  <li>222</li>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word</div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }
 
  }
 
  })
 </script>

vue slots 组件的组合/分发实例

<app></app>标签没有引入其他组件时显示为图1,有其他组件时显示为图2

同时可以实测到可以引入多个并列的组件,组件会依次显示

但是这只能解决单个 组件的引入 ,实际应用中需要多个应用的组件会在多个位置,为了解决这个问题,就得确定slot位置的唯一性为了确定slot 的vue 中可以给slot 添加行内 name来识别 ,

需要注意的是:同一父级下的slot 添加行内 name必须保证唯一;

子组件下的slot 的name 是可以与父级组件的slot name 重复的,及每一级具有相对独立性。

代码效果图如下:

<body>
 <div id="app">
 <app>
  <child slot="slot1">
 
  </child>
 
  <div slot="slot2">How to use slot?</div>
 
 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot name="slot1">没有则显示这个</slot>\
  <li>111</li>\
  <li>222</li>\
  <slot name="slot2">没有则显示这个</slot>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word\
    <li>22222</li>\
   </div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }
 
  }
 
  })
 </script>

vue slots 组件的组合/分发实例

以上这篇vue slots 组件的组合/分发实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
根据地区不同显示时间的javascript代码
Aug 13 Javascript
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
React注册倒计时功能的实现
Sep 06 #Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 #Javascript
Vue文件配置全局变量的实例
Sep 06 #Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 #Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
Vue实现表格中对数据进行转换、处理的方法
Sep 06 #Javascript
vue生成文件本地打开查看效果的实例
Sep 06 #Javascript
You might like
短波的认识
2021/03/01 无线电
Smarty模板快速入门
2007/01/04 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python3实现点餐系统
2019/01/24 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
基于python3实现倒叙字符串
2020/02/18 Python
Python使用type动态创建类操作示例
2020/02/29 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
个人投资计划书
2014/05/01 职场文书
万里长城导游词
2015/01/30 职场文书
消防宣传标语大全
2015/08/03 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书