vue2升级vue3：Vue2/3插槽——vue3的jsx组件插槽slot怎么处理

vue2升级vue3：Vue2/3插槽——vue3的jsx组件插槽slot怎么处理已关闭评论
162 次浏览

A+

所属分类：Web前端

摘要

让用户可以拓展组件，去更好地复用组件和对其做定制化处理。Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的‘空间’。

插槽的作用

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

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

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

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

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

<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) 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'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插槽的使用 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