当前位置: 首页 > 文档资料 > Vue.js 教程 >

7.9.8 vm.$slots

优质
小牛编辑
125浏览
2023-12-01
  • 类型:{ [name: string]: ?Array<VNode> }
  • 只读
  • 详细:

用来访问被 插槽分发 的内容。每个 具名插槽 有其相应的属性 (例如:slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名插槽中的节点。

在使用 渲染函数 书写一个组件时,访问 vm.$slots 最有帮助。

示例:

<blog-post>
  <h1 slot="header">
    About Me
  </h1>

  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>

  <p slot="footer">
    Copyright 2016 Evan You
  </p>

  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>
Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

最后更新:

类似资料

  • 本文向大家介绍vue slots 组件的组合/分发实例,包括了vue slots 组件的组合/分发实例的使用技巧和注意事项,需要的朋友参考一下 使用slots 分发内容 使用组件时常常会有组件组合使用的情况,如下: 直接套用组件的话,父级组件会将子级组件覆盖掉,不能实现需求的效果,为了实现该效果就需要使用 slots来内容分发 slots的使用方法如下: <app></app>标签没有引入其他组件

  • 本文向大家介绍vue Render中slots的使用的实例代码,包括了vue Render中slots的使用的实例代码的使用技巧和注意事项,需要的朋友参考一下 本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考。希望此文章对各位有所帮助。 render 中 slot 的一般默认使用方式如下: this.$slots.default

  • 本文向大家介绍深入浅析Vue中的slots/scoped slots,包括了深入浅析Vue中的slots/scoped slots的使用技巧和注意事项,需要的朋友参考一下 一直对Vue中的slot插槽比较感兴趣,下面是自己的一些简单理解,希望可以帮助大家更好的理解slot插槽 下面结合一个例子,简单说明slots的工作原理 dx-li子组件的template如下: 传递的插槽内容'hello ju

  • 在 Python 中,我们在定义类的时候可以定义属性和方法。当我们创建了一个类的实例后,我们还可以给该实例绑定任意新的属性和方法。 看下面一个简单的例子: class Point(object): def __init__(self, x=0, y=0): self.x = x self.y = y >>> p = Point(3, 4) >>> p.

相关阅读