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 表单验证扩展(四)
Oct 20 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
JS判断字符串包含的方法
May 05 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
javascript实现下拉菜单效果
Feb 09 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的聊天室设计
2006/10/09 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python数据结构之链表的实例讲解
2017/07/25 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
使用python模拟高斯分布例子
2019/12/09 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
父亲生日宴会答谢词
2014/01/10 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
施工协议书范本
2014/04/22 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
工程部部长岗位职责
2015/02/12 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS