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获取单选按钮的数据
Nov 27 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
javascript判断office版本示例
Apr 11 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
简单理解vue中Props属性
Oct 27 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
vuex实现数据状态持久化
Nov 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php生成验证码函数
2015/10/20 PHP
php简单日历函数
2015/10/28 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
有趣的python小程序分享
2017/12/05 Python
python字符串的方法与操作大全
2018/01/30 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
信访工作经验交流材料
2014/05/23 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
校长师德表现自我评价
2015/03/04 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python