使用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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php导入导出excel实例
2013/10/25 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery中element选择器用法实例
2014/12/29 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
js中的闭包实例展示
2018/11/01 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
django创建css文件夹的具体方法
2020/07/31 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
python中pyqtgraph知识点总结
2021/01/26 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
运动会领导邀请函
2014/02/05 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书