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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python 通配符删除文件的实例
2018/04/24 Python
点球小游戏python脚本
2018/05/22 Python
python数据挖掘需要学的内容
2019/06/23 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
自我评价格式
2014/01/06 职场文书
暑期实践思想汇报
2014/01/06 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
关于运动会的广播稿
2014/09/22 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js