使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)


Posted in Javascript onMay 01, 2018

写在前面

之前写过一篇关于vue实现dialog会话框组件的文章https://3water.com/article/139218.htm

 讲到了如何实现一个vue对话框组件,其中涉及到了父组件和子组件的通信,这个不用多说,看我之前的文章就能明白,文章最后也说到了,我们可以使用slot插槽来编写组件,slot用来分发内容到子组件中,从而实现组件的高度复用,编写的组件更加灵活。

还是结合对话框的例子,使用slot来实现对话框组件

注册一个名叫dialog-tip的全局组件

Vue.component('dialog-tip', {
   template: '#dialog-tip',
   props:['dialogShow','message'],
   data:function(){
    return {
     content:''
    }
   },
   methods:{
   }
  });

使用templete标签来定义这个组件

<template id="dialog-tip">
  <div class="dialog_tip" v-if="dialogShow">
   <div class="dialog_tip--mask"></div>
   <div class="dialog_tip--content">
    <div class="dialog_tip--content__txt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </div>
    <div class="dialog_tip--content__btns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </div>
   </div>
  </div>
 </template>

<template id="dialog-tip">
  <div class="dialog_tip" v-if="dialogShow">
   <div class="dialog_tip--mask"></div>
   <div class="dialog_tip--content">
    <div class="dialog_tip--content__txt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </div>
    <div class="dialog_tip--content__btns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </div>
   </div>
  </div>
 </template>

组件内容包括两部分 ,一个是提示内容,一个是button按钮,我们将要修改替换的内容使用slot包含起来,
 这样父组件就可以分发内容到子组件里面了。

<div class="dialog_tip--content__txt">
     <slot name="msg">请输入1-8000之间任意整数</slot>
    </div>
    <div class="dialog_tip--content__btns">
     <slot>
      <button class="btn">确定</button>
      <button class="btn">重新输入</button>
      <button class="btn">去注册</button>
     </slot>
    </div>

除了默认插槽,还可以定义具名插槽 ,如果组件中有好几个部分内容需要替换,我们可以为它定义一个name,例如:

<slot name="msg">请输入1-8000之间任意整数</slot>

这样在使用组件的时候,指定slot的name ,就会将这一部分内容替换掉,而不会替换其他的插槽内容

<p slot="msg">请输入正确手机号</p>

使用定义好的dialog组件

<dialog-tip message="hello" :dialog-show="dialogShow.tip3">
   <p slot="msg">请输入正确手机号</p>
   <button class="btn" @click="closeDialogTip('tip3')">确定</button>
  </dialog-tip>
  <dialog-tip message="hello" :dialog-show="dialogShow.tip4">
   <p slot="msg">抱歉,没有此用户,请核实后输入</p>
   <button class="btn" @click="closeDialogTip('tip4')">重新输入</button>
   <button class="btn" @click="reg">去注册</button>
  </dialog-tip>

如果不指定slot的名称,默认dialog-tip标签里面的内容会替换子组件中使用slot包含的内容部分,例如以上

使用slot指定了它的名称来替换子组件中的对应的slot部分,而没有使用slot指定名称的内容会默认将子组件中
 没有定义具名插槽的部分内容替换掉。

需要注意的是,如果dialog-tip标签里没有定义需要分发的内容,那么子组件中会显示默认的插槽内容

关于更多的slot用法,请移步https://cn.vuejs.org/v2/guide/components-slots.html

最后

效果图

使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)

总结

以上所述是小编给大家介绍的使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 #Javascript
如何获取TypeScript的声明文件.d.ts
May 01 #Javascript
Vue项目中使用Vux的安装过程
May 01 #Javascript
在Vue项目中使用d3.js的实例代码
May 01 #Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 #Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 #Javascript
JS实现的缓冲运动效果示例
Apr 30 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP将XML转数组过程详解
2013/11/13 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP微信红包API接口
2015/12/05 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
js中的string.format函数代码
2020/08/11 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
JavaScript window.location对象
2014/11/14 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python处理中文编码和判断编码示例
2014/02/26 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python选择排序算法实例总结
2015/07/01 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
建议书标准格式
2014/03/12 职场文书
大学生党员个人总结
2015/02/13 职场文书