[JavaScript知识库]vue2升级vue3：Vue2/3插槽——vue3的jsx组件插槽slot怎么处理

插槽的作用

让用户可以拓展组件，去更好地复用组件和对其做定制化处理。

Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的‘空间’。

1. 父组件在引用子组件时希望向子组价传递模板内容<p>测试一下吧内容写在这里了能否显示</p>?

2. 子组件让父组件传过来的模板内容在所在的位置显示?

3. 子组件中的<slot>就是一个槽，可以接收父组件传过来的模板内容，<slot> 元素自身将被替换?

4. <myslot></myslot>组件没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

插槽的分类

vue 在 2.6 版本中，对插槽使用 v-slot 新语法，取代了旧语法的 slot 和 slot-scope，并且之后的 Vue 3.0 也会使用新语法，这并不是仅写法的不同，还包括了性能的提升

插槽分为普通插槽和作用域插槽，普通插槽为父组件传递数据/元素/组件给子组件，而子组件定义 <slot> 接收，当插槽有多个的时候，需要使用具名插槽 <slot name="xxx">，用于将数据绑定在指定的插槽

普通插槽

//??父组件
<template?v-slot>
??<p>new?Nian糕</p>
</template>
//?旧语法?只需一行：<p?slot>old?Nian糕</p>

//?子组件
<slot?/>

具名插槽

//?父组件
<template?v-slot:item>
??<p>new?Nian糕</p>
</template>
//?旧语法：<p?slot="item">old?Nian糕</p>

//?子组件
<slot?name="item"?/>

作用域插槽为子组件 <slot> 绑定属性，传递数据给父组件，父组件通过 v-slot:xxx="props" 接收子组件传递的属性

作用域插槽 旧语法

//??父组件
<p?slot="love"?slot-scope="props">爱old?{{?props.name?}}真是太好了</p>

//?子组件
<slot?name="love"?v-bind="{?name?}"?/>

export?default?{
??data()?{
????return?{
??????name:?"Nian糕"
????}
??}
}

作用域插槽 新语法

//??父组件
<template?v-slot:love="props">
??<p>爱new?{{?props.name?}}真是太好了</p>
</template>

//?子组件
<slot?name="love"?v-bind="{?name?}"?/>

export?default?{
??data()?{
????return?{
??????name:?"Nian糕"
????}
??}
}

案例2

//子组件?：?(假设名为：ebutton)
<template>
????<div?class=?'button'>
????????<button>?test</button>
????????<slot?name=?'one'?:value1='child1'>?这就是默认值1</slot>????//绑定child1的数据
????????<slot?:value2='child2'>?这就是默认值2?</slot>??//绑定child2的数据，这里我没有命名slot
????</div>
</template>

<script>
new?Vue({
??el:'.button',
??data:{
????child1:'数据1',
????child2:'数据2'
??}
})
</script>

//父组件：（引用子组件?ebutton）
<template>
????<div?class=?'app'>
????????<ebutton>
????????????<template?v-slot:one?=?'slotone'>
????????????????{{?slotone.value1?}}????//?通过v-slot的语法?将子组件的value1值赋值给slotone
????????????</template>
????????????<template?v-slot:default?=?'slottwo'>
????????????????{{?slottwo.value2?}}??//?同上，由于子组件没有给slot命名，默认值就为default
????????????</template>
????????</ebutton>
????</div>
</template>

Vue3.0 slot简写

<!--?父组件中使用?-->
?<template?v-slot:content="scoped">
???<div?v-for="item?in?scoped.data">{{item}}</div>
</template>

<!--?也可以简写成：?-->
<template?#content="{data}">
????<div?v-for="item?in?data">{{item}}</div>
</template>

Vue3.0在JSX/TSX下如何使用插槽(slot)

先看看官方：?https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md#插槽

在 jsx 中，应该使用 v-slots 代替 v-slot

const?A?=?(props,?{?slots?})?=>?(
??<div>
????<h1>{?slots.default???slots.default()?:?'foo'?}</h1>
????<h2>{?slots.bar?.()?}</h2>
??</div>
);

const?App?=?{
??setup()?{
????const?slots?=?{
??????bar:?()?=>?<span>B</span>,
????};
????return?()?=>?(
??????<A?v-slots={slots}>
????????<div>A</div>
??????</A>
????);
??},
};

//?or

const?App?=?{
??setup()?{
????const?slots?=?{
??????default:?()?=>?<div>A</div>,
??????bar:?()?=>?<span>B</span>,
????};
????return?()?=>?<A?v-slots={slots}?/>;
??},
};

//?or
const?App?=?{
??setup()?{
????return?()?=>?(
??????<>
????????<A>
??????????{{
????????????default:?()?=>?<div>A</div>,
????????????bar:?()?=>?<span>B</span>,
??????????}}
????????</A>
????????<B>{()?=>?"foo"}</B>
??????</>
????);
??},
};

上面代码来源：Vue3.0在JSX/TSX下如何使用插槽(slot)?Vue3.0在JSX/TSX下如何使用插槽(slot) - PinkChampagne - 博客园

关于jsx的，可以瞅瞅：vue3下jsx教学，保证业务上手无问题！vue3下jsx教学，保证业务上手无问题！手敲代码，有知识点，附带和template对比 - 掘金

vue3 template与jsx写法对比

ue template中的slot插槽如何在JSX中实现？和template对比，更加清晰

template写法

子组件

<template>
????<div>
????????<span>I'm?Child</span>
????????<slot></slot>
????????<slot?name="header"></slot>
????</div>
</template>

<script>
export?default?{
????name:?"Test"
}
</script>

父组件

<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>

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/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={{
????????????????default:?()?=>?(
????????????????????<div>这是默认插槽</div>
????????????????),
????????????????header:?()?=>?(
????????????????????<div>这是header插槽</div>
????????????????)
????????????}}>
????????????</TestComponent>
????????)
????}
})

作用域插槽

import?{?defineComponent?}?from?'vue'
import?TestComponent?from?'./TestComponent'

export?default?defineComponent({
????name:?"Test",
????components:?{
????????TestComponent
????},
????render()?{
????????return?(
????????????<TestComponent?v-slots={{
????????????????content:?scope?=>?(?<div>{scope.name}</div>)
????????????}}>
????????????</TestComponent>
????????)
????}
})

参考文章：

Vue3中的 JSX 以及 jsx插槽的使用?Vue3中的 JSX 以及 jsx插槽的使用(随便聊系列) - 掘金

Vue3 中插槽(slot)的用法?Vue3 中插槽(slot)的用法 - 是阿恒呀 - 博客园

vue3 学习 之 vue3使用?vue3 学习 之 vue3使用 - 简书

【vue3】 使用JSX实现普通、具名和作用域插槽?【vue3】 使用JSX实现普通、具名和作用域插槽_搬砖的猿@的博客-CSDN博客_jsx 作用域插槽

转载本站文章《vue2升级vue3：Vue2/3插槽——vue3的jsx组件插槽slot怎么处理》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8683.html