• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • $slots

    • 类型:{[name: string]:(...args: any[])=> Array<VNode>| undefined}
    • 仅可读
    • 详细:用来访问被插槽分发的内容。每个具名插槽有其相应的 property(例如:v-slot:foo中的内容将会在this.$slots.foo中被找到)。default property 包括了所有没有被包含在具名插槽中的节点,或v-slot:default的内容。在使用渲染函数书写一个组件时,访问this.$slots最有帮助。


    <blog-post>
    	<template v-slot:header>
    		<h1>About Me</h1>
    	</template>
    
    	<template v-slot:default>
    		<p>
    			Here's some page content, which will be included in $slots.default.
    		</p>
    	</template>
    
    	<template v-slot:footer>
    		<p>Copyright 2020 Evan You</p>
    	</template>
    </blog-post>
    
    
    //JS
    const app = Vue.createApp({})
    
    app.component('blog-post', {
      render() {
        return Vue.h('div', [
          Vue.h('header', this.$slots.header()),
          Vue.h('main', this.$slots.default()),
          Vue.h('footer', this.$slots.footer())
        ])
      }
    })
    

    上篇:$el

    下篇:$refs