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

插槽的作用

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

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

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

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

 

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

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

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

插槽的分类

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}}