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

插槽的作用

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

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

  1. 父组件在引用子组件时希望向子组价传递模板内容

    测试一下吧内容写在这里了能否显示

     

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

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

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

插槽的分类

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

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

普通插槽

//  父组件

  
new Nian糕


// 旧语法 只需一行：old Nian糕


// 子组件

具名插槽

// 父组件

  
new Nian糕


// 旧语法：old Nian糕


// 子组件

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

作用域插槽 旧语法

//  父组件
爱old {{ props.name }}真是太好了


// 子组件


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

作用域插槽 新语法

//  父组件

  
爱new {{ props.name }}真是太好了



// 子组件


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

案例2

//子组件 ： (假设名为：ebutton)




//父组件：（引用子组件 ebutton）

            
                {{ slottwo.value2 }}  // 同上，由于子组件没有给slot命名，默认值就为default
            
        
    

Vue3.0 slot简写


 
   {{item}}
    {{item}}

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 }) => (
  

    
{ slots.default ? slots.default() : 'foo' }

    
{ slots.bar?.() }

  

);

const App = {
  setup() {
    const slots = {
      bar: () => B,
    };
    return () => (
      
        
A

      
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => 
A
,
      bar: () => B,
    };
    return () => ;
  },
};

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

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

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

vue3 template与jsx写法对比

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

template写法

子组件

父组件


        
            这是header插槽
        
    

JSX的写法:

子组件

import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    name: "Test",
    render() {
        return (
            <>
                I'm Child
                { this.$slots.default?.() }
                { this.$slots.header?.() }
            
        )
    }
})
作用域插槽
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    name: "Test",
    setup() {
        return {
            value: {
                name: 'xzw'
            }
        }
    },
    render() {
        return (
            <>
                I'm Child
                { this.$slots.content?.(this.value) }
            
        )
    }
})

父组件

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

export default defineComponent({
    name: "Test",
    components: {
        TestComponent
    },
    render() {
        return (
             (
                    
这是默认插槽

                ),
                header: () => (
                    
这是header插槽

                )
            }}>
            
        )
    }
})
作用域插槽
import { defineComponent } from 'vue'
import TestComponent from './TestComponent'

export default defineComponent({
    name: "Test",
    components: {
        TestComponent
    },
    render() {
        return (
             ( 
{scope.name}
)
            }}>
            
        )
    }
})

参考文章：

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

Vue3 中插槽(slot)的用法 

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

JavaScripttsxTypeScriptvue3slot插槽

相关

javascript基础知识(29) 实现继承的方式

vue2与vue3中全局配置axios的不同点

vue3中的watch与vue2中的watch的对比

7个有用的JavaScript技巧

vue3 使用 data、computed、methods

JavaScript跳出嵌套循环

vue3 绑定多个model技巧之 抽取useVModel

JavaScript常用对象介绍

JavaScript学习day03

vue中v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别

推荐12个最好的 JavaScript 图形绘制库

javascript模板字符串（反引号）

标签