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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
js中unicode转码方法详解
Oct 09 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
vue中注册自定义的全局js方法
Nov 15 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通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
python实现udp传输图片功能
2020/03/20 Python
python模拟斗地主发牌
2020/04/22 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
小学科学教学反思
2014/01/26 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
车间机修工岗位职责
2014/02/28 职场文书
ktv好的活动方案
2014/08/17 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
申报材料格式
2014/12/30 职场文书
灵山大佛导游词
2015/02/04 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers