vue3render函数里定义插槽和使用插槽

新时代的弩力

已于 2022-06-02 10:44:09 修改

阅读量2.4k

点赞数

分类专栏： Vue 文章标签： vue.js

于 2022-03-24 15:22:29 首次发布

本文链接：https://blog.csdn.net/qq_42372534/article/details/123711409

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue3中this. $s l o t s 和 v u e 2 的区别 v u e 3 : t h i s .$ slots是一个{ [name: string]: (…args: any[]) => Array | undefined }的对象,每个具名插槽的内容都要通过函数调用如v-slot:foo插槽分发的内容通过this. $s l o t s . f o o () 返回 v u e 2 : t h i s .$ slots是一个{ [name: string]: ?Array }的对象,v-slot:foo的内容通过this. $s l o t s . f o o 来访问, 而 t h i s .$ scopedSlots才是和vue3里的this.$slots作用一样.

定义插槽

this.$slots.[插槽名] 这个一个返回VNode数组的函数,用于访问静态插槽内容.

const BlogPost = defineComponent({
  render(){
    return h('div', [
      h('h1',this.$slots.header&&this.$slots.header()||'默认header插槽'),
      h('p',this.$slots.default&&this.$slots.default({message:'我是作用域插槽的message'})||'默认default插槽'),
      h('h4',this.$slots.footer&&this.$slots.footer()||'默认footer插槽'),
    ])
  }
})

// 以上代码相当于以下的template
<template>
	<div>
		<h1>
			<slot name="header">默认header插槽</slot>
		</h1>
		<p>
			<slot>默认default插槽</slot>
		</p>
		<h4>
			<slot name="footer">默认footer插槽</slot>
		</h4>
	</div>
</template>

定义有插槽的组件使用插槽

在h函数的第三个参数中使用{ [name: string]: (…args: any[]) => Array | undefined }形式的对象来定义组件的具体插槽内容

const BlogPostWrapper = defineComponent({
  render(){
    return h('div',
             {style:'background:skyblue'},
             h(
      			BlogPost,
               	null,
               	{
                  header(props){
                    return '我是传进的header插槽内容'
                  },
      			  default(props){
      			  // 这里的props就是作用域插槽的插槽prop
                    return 'BlogPostWrapper的default插槽内容::>>'+props.message
                  },
                  footer(props){
                    return '我是传进的footer插槽内容'
                  }
    			}
    		)
          )
  	}
})
// 相当于template
<template>
	<div>
		<BlogPost>
			<tempalte #header>'我是传进的header插槽内容'</tempalte>
			<tempalte #default="props">
				{{'BlogPostWrapper的default插槽内容::>>'+props.message}}
			</tempalte>
			<tempalte #footer>我是传进的footer插槽内容</tempalte>
		</BlogPost>
	</div>
</template>