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) ]) } })