Vue匿名插槽与作用域插槽的合并和覆盖行为

Vue 测试版本：Vue.js v2.5.13

Vue 文档：

<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。

具体应用的时候：

1、匿名插槽的合并行为：

<div id="app">
    <myele>
      <div>
        default slot
      </div>
      <div>
        <div>from parent!</div>
        <div>from parent!</div>
      </div>
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `
     <div>
     <slot></slot>
     </div>
    `
  });
  new Vue({
    el: '#app'
  });
};

效果：内容合并

2、匿名作用域插槽的覆盖行为：

 <div id="app">
    <myele>
      <div slot-scope="props">
        <div>from parent!</div>
        <div>from {{props.text}}</div>
      </div>
      <div slot-scope="prop">
        <div>from </div>
        <div>{{prop.text}}</div>
      </div>
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `
     <div>
     <slot text="child"></slot>
     <slot text="child2"></slot>
//即使 text 和上一行一样，也不会报错，开发环境     </div>
    `
  });
  new Vue({
    el: '#app'
  });
};

效果：以靠后的作用域插槽模板为准，绘制了两遍；

3、匿名插槽模板和作用域插槽模板混合：

<div id="app">
    <myele>
      <div>
        default slot
      </div>
      <div slot-scope="props">
        <div>from parent!</div>
        <div>from {{props.text}}</div>
      </div>
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `
     <div>
     <slot></slot>
     <slot text="child"></slot>
     </div>
    `
  });
  new Vue({
    el: '#app'
  });
};

效果：匿名插槽以匿名作用域插槽模板为准进行渲染，即使你把匿名插槽模板放后面，也是一样的结果；

由此可以看出，最好不要使用匿名、默认插槽，最好使用具名插槽，可以减少不确定性；

参考文档：

https://cn.vuejs.org/v2/guide/components.html#具名插槽

总结

以上所述是小编给大家介绍的Vue匿名插槽与作用域插槽的合并和覆盖行为,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

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

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

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

  • Vue作用域插槽slot-scope实例代码

    vue中的插槽有三种:单个插槽.具名插槽.作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供.比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的.这个数据具体是什么由el-table-column中指定,类似: <slot

  • 详解Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的"<p>父组件如果没有插入内容,我将被显示</p>"这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot&

  • 详解Vue 匿名、具名和作用域插槽的使用方法

    详解Vue 匿名、具名和作用域插槽的使用方法

    Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的.Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法. 匿名插槽 子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽.只要在父元素中插入的内容,默认加入到这个插槽中去.

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

    详解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使用插槽分发内容的方法

    本文题材来自: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的作用域插槽的实现原理

    如何理解Vue的作用域插槽的实现原理

    本文介绍了如何理解Vue的作用域插槽的实现原理,分享给大家,也给自己留个笔记 举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作).而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • 浅析vue插槽和作用域插槽的理解

    插槽: 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实.以及怎样显示由父组件来决定. 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制.但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块.这样就使组件可复用性更高,更加灵活.我们可以随时通过父组件给子组件加一些需要的东西. 这个可以参考https://www.jb51.net/article/160047.htm.这位

  • Vue匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段中有对应 slot 特性的元素. 仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽. 具体应用的时候: 1.匿名插槽的合并行为: <div id="app"> <myele> <div> default slot </div

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

    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学习笔记之作用域插槽实例分析

    本文实例讲述了vue学习笔记之作用域插槽.分享给大家供大家参考,具体如下: <child></child> Vue.component('child', { data: function () { return { list: [1, 2, 3] } }, template: '<div> <ul> <li v-for="item of list">{{item}}</li> </ul> </di

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

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

  • Vue中的匿名插槽与具名插槽详解

    Vue中的匿名插槽与具名插槽详解

    目录 1.匿名插槽 2.具名插槽 总结 slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口. 插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的. slot又分三类,默认插槽,具名插槽和作用域插槽.(这里说前两种) 插槽的实质是:插槽实质是对子组件的扩展,通过<slot>插槽-----向组件内部"指定位置"传递内容. 1.匿名插槽 默认插槽:又名匿名插槽,当slot没有指定name属

  • Vue默认插槽,具名插槽,作用域插槽定义及使用方法

    目录 一.三种插槽的定义 1.默认插槽 2.具名插槽 3.作用域插槽 二.使用方法 1.默认插槽 2.具名插槽 3.作用域插槽 应用场景: 插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据 一.三种插槽的定义 插槽分为三种: 默认插槽 具名插槽 作用域插槽 1.默认插槽 [定义:默认插槽是将父组件的结构和数据插入子组件中,默认插槽只有一个插入位置,要插入的html结构和data数据必须在父组件中,不过css可以在子组件中][简述:将父组件的自定义html和data插入子

随机推荐