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

写在前面

之前写过一篇关于vue实现dialog会话框组件的文章http://www.jb51.net/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使用插槽分发内容的方法
  • 详解vue slot插槽的使用方法
(0)

相关推荐

  • Vue中的slot使用插槽分发内容的方法

    本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9 <slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来. 也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件.那么如何实现呢?

  • 详解vue slot插槽的使用方法

    官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"><

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

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.jb51.net/article/139218.htm 讲到了如何实现一个vue对话框组件,其中涉及到了父组件和子组件的通信,这个不用多说,看我之前的文章就能明白,文章最后也说到了,我们可以使用slot插槽来编写组件,slot用来分发内容到子组件中,从而实现组件的高度复用,编写的组件更加灵活. 还是结合对话框的例子,使用slot来实现对话框组件 注册一个名叫dialog-tip的全局组件 Vue.compone

  • Vue.js slot插槽的作用域插槽用法详解

    目录 没有插槽的情况 Vue2.x 插槽 有插槽的情况 具名插槽 没有slot属性 插槽简单实例应用 作用域插槽 ( 2.1.0 新增 ) Vue3.x 插槽 插槽 作用域插槽 没有插槽的情况 <div id="app"> <child> <span>1111</span> </child> </div> <script> // 注册子组件 Vue.component("child"

  • Vue中slot插槽作用与原理详解

    目录 1.作用 2.插槽内心 2.1.默认插槽 2.2.具名插槽(命名插槽) 2.3.作用域插槽 实现原理 1.作用 父组件向子组件传递内容 扩展.复用.定制组件 2.插槽内心 2.1.默认插槽 把父组件中的数组,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据. 子组件 <template> <div class="slotChild"> <h4>{{msg}}</h4> <slot>这是子组件插槽默认的值&

  • vue父子组件slot插槽的使用

    目录 vue父子组件slot插槽 1.创建一个子组件并在vue实例中注册 2.在HTML代码中使用子组件 3.在vue实例中写入想要插入到子组件的内容 4.在子组件的模板中通过一个slot标签 vue插槽v-slot实现父向子传值 vue父子组件slot插槽 关于父组件在使用子组件的时候,向子组件插入内容的方法 1.创建一个子组件并在vue实例中注册 这是创建子组件 var testzujian = {         template:`<div>             <span&

  • 详解vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div> </son-tmp> 单个插槽 父组件app.vue <template> <div id="app"> <test-slot> <span>我是父组件里的文字,但是我要被放到子组件里</span> </t

  • 从组件封装看Vue的作用域插槽的实现

    作用域插槽不是那么直观的一个概念.Vue文档使用了一段描述性的话来解释作用域插槽: 有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽 -- 但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西.这也是作用域插槽的用武之地. 但在我看来,至少是第一次读到的时候,这段话相当不好理解.插槽不是分发内容到子组件吗,为什么还要从子组件中获取数据?不是已经有了通过emit事件的方法从子组件向父组件传递数据吗,为什么需要它?作用域插槽到底是来干嘛的?-

  • vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

    本文实例讲述了vue 使用插槽分发内容操作.分享给大家供大家参考,具体如下: 单个插槽 除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃.当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 例: <!DOCTYPE html> &

  • 玩转vue的slot内容分发

    vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会触发拉取更多内容的操作,因此我们可以把下拉loading做成一个有slot的插件. 单个Slot 在children这个标签里面放Dom,Vue不会理你,也就是不会显示,类似React:this.props.children. //父 <children> <span>12345<

随机推荐