【vue3】 使用JSX实现普通、具名和作用域插槽
最近在vue3构建的项目中使用到了JSX(不得不说JSX用起来的感觉就是清爽)。但是前段时间遇到了一个问题,vue template中的slot插槽如何在JSX中实现呢?查了很久资料、文档都很难找到一个能够直接解决我的问题的方案,后来各个文档中找到的线索拼接起来后逐渐尝试才实现。...
·
最近在vue3构建的项目中使用到了JSX(不得不说JSX用起来的感觉就是清爽)。但是前段时间遇到了一个问题,vue template中的slot插槽如何在JSX中实现呢?查了很久资料、文档都很难找到一个能够直接解决我的问题的方案,后来各个文档中找到的线索拼接起来后逐渐尝试才实现。
一、普通插槽和具名插槽
vue中最简单的插槽写法,这里我们都统一写出父组件、子组件的插槽引用方式。
vue中的写法:
子组件
<template>
<div>
<span>I'm Child</span>
<slot></slot>
<slot name="header"></slot>
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style>
</style>
父组件
<template>
<TestComponent>
<template #default>
<span>这是默认插槽</span>
</template>
<template #header>
<span>这是header插槽</span>
</template>
</TestComponent>
</template>
<script>
import TestComponent from './TestComponent'
export default {
name: "Parent",
components: {
TestComponent
}
}
</script>
<style>
</style>
现在我们来看看JSX的写法:
子组件
import { defineComponent } from "@vue/runtime-core";
export default defineComponent({
name: "Test",
render() {
return (
<>
<span>I'm Child</span>
{ this.$slots.default?.() }
{ this.$slots.header?.() }
</>
)
}
})
父组件
import { defineComponent } from 'vue'
import TestComponent from './TestComponent'
export default defineComponent({
name: "Test",
components: {
TestComponent
},
render() {
return (
<TestComponent v-slots={{
default: () => (
<>这是默认插槽</>
),
header: () => (
<>这是header插槽</>
)
}}>
</TestComponent>
)
}
})
可以看到,父组件通过 v-slots 属性去定义插槽,子组件直接在 render 中通过 this.$slots[name] 去获取。
二、作用域插槽
其实作用域插槽在JSX中的写法也一样,只需要将scope作为参数传递即可。
vue中的写法
子组件:
<template>
<div>
<span>I'm Child</span>
<slot name="content" :value="value"></slot>
</div>
</template>
<script>
export default {
name: "Test",
setup() {
return {
value: {
name: 'xzw'
}
}
}
}
</script>
<style>
</style>
父组件:
<template>
<TestComponent>
<template #content="scope">
{{ scope.value.name }}
</template>
</TestComponent>
</template>
<script>
import TestComponent from './TestComponent.vue'
export default {
name: "Parent",
components: {
TestComponent
}
}
</script>
<style>
</style>
JSX中的写法:
子组件
import { defineComponent } from "@vue/runtime-core";
export default defineComponent({
name: "Test",
setup() {
return {
value: {
name: 'xzw'
}
}
},
render() {
return (
<>
<span>I'm Child</span>
{ this.$slots.content?.(this.value) }
</>
)
}
})
父组件
import { defineComponent } from 'vue'
import TestComponent from './TestComponent'
export default defineComponent({
name: "Test",
components: {
TestComponent
},
render() {
return (
<TestComponent v-slots={{
content: scope => (
<>{scope.name}</>
)
}}>
</TestComponent>
)
}
})
更多推荐
所有评论(0)