使用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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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查找任何页面上的所有链接的方法
2013/12/03 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
js实现字符串的16进制编码不加密
2014/04/25 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
python调用shell的方法
2013/11/20 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
医院辞职信范文
2014/01/17 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
演讲开场白台词大全
2015/05/29 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2019 入党申请书范文
2019/07/10 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS