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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
js读取注册表的键值示例
Sep 25 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
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
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php判断当前操作系统类型
2015/10/28 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python语言进阶知识点总结
2019/05/28 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
创新社会管理心得体会
2014/09/12 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
导游词之青城山景区
2019/09/27 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL