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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值