Vue3和Vue2的slot-scope插槽用法

🧨🧨🧨第一种插槽（匿名插槽）

🧨🧨🧨第二种插槽（具名插槽）以及插槽简写

具名插槽的使用

🧨🧨🧨第三种插槽(作用域插槽)

🧨🧨🧨第四种插槽-写入插槽

🧨🧨🧨写入插槽与具名插槽的区别？

Vue2slot-scope插槽用法

//vue2.x的写法

     //2.x的写法
        {{scope.row.ce}}

Vue3slot-scope插槽用法

     //3.x的新写法 -- #default="scope" $index
        {{row.ce}}

看完觉得没了？恭喜你没走开，下面的更精彩，分享Vue3里面v-solt插槽的四种用法:

🧨🧨🧨第一种插槽（匿名插槽）

现在我们封装一个组件，在组件中可以自定义内容。

这个时候我们就可以使用插槽了。

插槽可以将父页面中的内容展示在子组件中指定的位置。

父页面

//父页面

    
        
             
                匿名插槽添加的数据 
            
        
    



import ChaCao from "../components/ChaCao.vue"

//子组件

    
        我是组件中标题

Vue3和Vue2的slot-scope插槽用法

说明：

子当组件渲染的时候，将会被替换为“匿名插槽添加的数据 ”。

插槽还可以包含任何模板代码，包括 HTML，或者其他组件。

🧨🧨🧨第二种插槽（具名插槽）以及插槽简写

很多的时候，我们可能在组件的不同位置展示不同的内容。

这个时候我们就需要使用具名插槽。

跟 v-on 和 v-bind 一样，v-slot 也有缩写。

(v-slot:) 替换为字符 #

例如 v-slot:header 可以被重写为 #header：

具名插槽的使用

    
        
            
                标题是学习vue3
            

            
                正文是好好学习，天天向上
            
        
    


import ChaCao from "../components/ChaCao.vue"

子组件

    
        我是组件中标题
        
    
    ========================
    
        我是正文

Vue3和Vue2的slot-scope插槽用法

🧨🧨🧨第三种插槽(作用域插槽)

有时让插槽内容能够访问子组件中才有的数据是很有用的。

当一个组件被用来渲染一个项目数组时，这是一个常见的情况，

我们希望能够自定义每个项目的渲染方式。

作用域插槽的使用

父组件.vue

    
        
              
                 下面这个电视剧是自定义的哈
                 这就是作用域插槽哈
                 电视剧名称:{{ slotProps.row.name }} 人物:{{slotProps.row.person }} 序号--{{ slotProps.index }} 
             
        
    



import ChaCao from "../components/ChaCao.vue"
let arr=[
    {name:'且试天下',person:'丰兰息'},
    {name:'请叫我总监',person:'小橘子'},
    {name:'你是我的荣耀',person:'路人甲',slotFlag:true},
]

//子组件

   
        
             
                电视剧名称:{{ item.name }} 人物:{{item.person }} 序号:{{ index }} 
            
            
                
            
        
    



import {defineProps} from 'vue'
defineProps({
    listArr:{
        type:Array,
        default:()=>{
            return []
        }
    },
})

效果:

Vue3和Vue2的slot-scope插槽用法

🧨🧨🧨第四种插槽-写入插槽

//父页面

  
    {{ name }}==
    
      
        我在哪里
      
    
  



import { ref,  } from 'vue'
const name = ref('header')

//子组件

  
    
      我是头部
    

    
      我是主体

Vue3和Vue2的slot-scope插槽用法

🧨🧨🧨写入插槽与具名插槽的区别？

最大的区别是name是动态的对于写入插槽来讲

具名插槽：具名插槽的name是固定值（静态值）

最后：逃不出去的浪浪山,才是每个打工人心底最大的恐惧

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/b14b03bd58.html

Vue3和Vue2的slot-scope插槽用法

🧨🧨🧨第一种插槽（匿名插槽）

我是组件中标题

🧨🧨🧨第二种插槽（具名插槽）以及插槽简写

具名插槽的使用

标题是学习vue3

正文是好好学习，天天向上

我是组件中标题

我是正文

🧨🧨🧨第三种插槽(作用域插槽)

下面这个电视剧是自定义的哈

这就是作用域插槽哈

电视剧名称:{{ slotProps.row.name }} 人物:{{slotProps.row.person }} 序号--{{ slotProps.index }}

电视剧名称:{{ item.name }} 人物:{{item.person }} 序号:{{ index }}

🧨🧨🧨第四种插槽-写入插槽

🧨🧨🧨写入插槽与具名插槽的区别？

相关推荐