写点什么

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

作者:zhoulujun
  • 2022 年 6 月 21 日
  • 本文字数:4006 字

    阅读完需:约 13 分钟

插槽的作用

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

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} />;  },};
// orconst 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

发布于: 刚刚阅读数: 3
用户头像

zhoulujun

关注

还未添加个人签名 2021.06.25 加入

还未添加个人简介

评论

发布
暂无评论
vue2升级vue3:Vue2/3插槽——vue3的jsx组件插槽slot怎么处理_typescript_zhoulujun_InfoQ写作社区