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">，用于将数据绑定在指定的插槽

普通插槽

//父组件
<templatev-slot>
<p>newNian糕</p>
</template>
//旧语法只需一行：<pslot>oldNian糕</p>
//子组件
<slot/>

具名插槽

//父组件
<templatev-slot:item>
<p>newNian糕</p>
</template>
//旧语法：<pslot="item">oldNian糕</p>
//子组件
<slotname="item"/>

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

作用域插槽 旧语法

//父组件
<pslot="love"slot-scope="props">爱old{{props.name}}真是太好了</p>
//子组件
<slotname="love"v-bind="{name}"/>
exportdefault{
data(){
return{
name:"Nian糕"
}
}
}

作用域插槽 新语法

//父组件
<templatev-slot:love="props">
<p>爱new{{props.name}}真是太好了</p>
</template>
//子组件
<slotname="love"v-bind="{name}"/>
exportdefault{
data(){
return{
name:"Nian糕"
}
}
}

案例2

//子组件：(假设名为：ebutton)
<template>
<divclass='button'>
<button>test</button>
<slotname='one':value1='child1'>这就是默认值1</slot>//绑定child1的数据
<slot:value2='child2'>这就是默认值2</slot>//绑定child2的数据，这里我没有命名slot
</div>
</template>
<script>
newVue({
el:'.button',
data:{
child1:'数据1',
child2:'数据2'
}
})
</script>
//父组件：（引用子组件ebutton）
<template>
<divclass='app'>
<ebutton>
<templatev-slot:one='slotone'>
{{slotone.value1}}//通过v-slot的语法将子组件的value1值赋值给slotone
</template>
<templatev-slot:default='slottwo'>
{{slottwo.value2}}//同上，由于子组件没有给slot命名，默认值就为default
</template>
</ebutton>
</div>
</template>

Vue3.0 slot简写

<!--父组件中使用-->
<templatev-slot:content="scoped">
<divv-for="iteminscoped.data">{{item}}</div>
</template>
<!--也可以简写成：-->
<template#content="{data}">
<divv-for="itemindata">{{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

constA=(props,{slots})=>(
<div>
<h1>{slots.default?slots.default():'foo'}</h1>
<h2>{slots.bar?.()}</h2>
</div>
);
constApp={
setup(){
constslots={
bar:()=><span>B</span>,
};
return()=>(
<Av-slots={slots}>
<div>A</div>
</A>
);
},
};
//or
constApp={
setup(){
constslots={
default:()=><div>A</div>,
bar:()=><span>B</span>,
};
return()=><Av-slots={slots}/>;
},
};
//or
constApp={
setup(){
return()=>(
<>
<A>
{{
default:()=><div>A</div>,
bar:()=><span>B</span>,
}}
</A>
<B>{()=>"foo"}</B>
</>
);
},
};

上面代码来源：Vue3.0在JSX/TSX下如何使用插槽(slot)https://www.cnblogs.com/pinkchampagne/p/14083724.html

关于jsx的，可以瞅瞅：vue3下jsx教学，保证业务上手无问题！https://juejin.cn/post/6911883529098002446

vue3 template与jsx写法对比

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

template写法

子组件

<template>
<div>
<span>I'mChild</span>
<slot></slot>
<slotname="header"></slot>
</div>
</template>
<script>
exportdefault{
name:"Test"
}
</script>

父组件

<template>
<TestComponent>
<template#default>
<span>这是默认插槽</span>
</template>
<template#header>
<span>这是header插槽</span>
</template>
</TestComponent>
</template>
<script>
importTestComponentfrom'./TestComponent'
exportdefault{
name:"Parent",
components:{
TestComponent
}
}
</script>

JSX的写法:

子组件

import{defineComponent}from"@vue/runtime-core";
exportdefaultdefineComponent({
name:"Test",
render(){
return(
<>
<span>I'mChild</span>
{this.$slots.default?.()}
{this.$slots.header?.()}
</>
)
}
})
作用域插槽
import{defineComponent}from"@vue/runtime-core";
exportdefaultdefineComponent({
name:"Test",
setup(){
return{
value:{
name:'xzw'
}
}
},
render(){
return(
<>
<span>I'mChild</span>
{this.$slots.content?.(this.value)}
</>
)
}
})

父组件

import{defineComponent}from'vue'
importTestComponentfrom'./TestComponent'
exportdefaultdefineComponent({
name:"Test",
components:{
TestComponent
},
render(){
return(
<TestComponentv-slots={{
default:()=>(
<div>这是默认插槽</div>
),
header:()=>(
<div>这是header插槽</div>
)
}}>
</TestComponent>
)
}
})
作用域插槽
import{defineComponent}from'vue'
importTestComponentfrom'./TestComponent'
exportdefaultdefineComponent({
name:"Test",
components:{
TestComponent
},
render(){
return(
<TestComponentv-slots={{
content:scope=>(<div>{scope.name}</div>)
}}>
</TestComponent>
)
}
})

参考文章：

Vue3中的 JSX 以及 jsx插槽的使用https://juejin.cn/post/6983130251702304781

Vue3 中插槽(slot)的用法https://www.cnblogs.com/recode-hyh/p/14544808.html

vue3 学习 之 vue3使用https://www.jianshu.com/p/91328e6934c9

【vue3】 使用JSX实现普通、具名和作用域插槽https://blog.csdn.net/qq_24719349/article/details/116724681

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

标签 , ,

发表回复