使用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 相关文章推荐
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
Stop SQL Server
2007/06/21 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
Angularjs 基础入门
2014/12/26 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
实例解析Array和String方法
2016/12/14 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python测试人员需要掌握的知识
2018/02/08 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python实现两个文件夹的同步
2019/08/29 Python
Haggar官网:美国男装品牌
2020/02/16 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
大学社团活动策划书
2014/01/26 职场文书
暑期研修感言
2014/02/17 职场文书
大家访活动实施方案
2014/03/10 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
绘画专业自荐信
2014/07/04 职场文书
股指期货心得体会
2014/09/10 职场文书
出国留学单位推荐信
2015/03/26 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
初中政治教学工作总结
2015/08/13 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书