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

插槽的作用

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

Vue 实现了一套内容分发的 API  
  
  
  
  
 ，将<slot>元素作为承载分发内容的出口
 


 


 


 


 


 
，这是vue文档上的说明
  
 
  
 
  
 
  
 
  
 
  。具体来说
 
 
 
 
 
，slot就是可以让你在组件内添加内容的‘空间’










。

父组件在引用子组件时希望向子组价传递模板内容<p>测试一下吧内容写在这里了能否显示</p>

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

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

<myslot></myslot>组件没有包含一个 <slot> 元素

 

 

 

 

 
，则该组件起始标签和结束标签之间的任何内容都会被抛弃

插槽的分类

vue 在 2.6 版本中            ，对插槽使用 v-slot 新语法
 
 

 
 

 
 

 
 

 
 

 
，取代了旧语法的 slot 和 slot-scope










，并且之后的 Vue 3.0 也会使用新语法                 ，这并不是仅写法的不同 
 
 
 
 
 
 
 
 
 
 
，还包括了性能的提升

插槽分为普通插槽和作用域插槽
















，普通插槽为父组件传递数据/元素/组件给子组件           ，而子组件定义 <slot> 接收  
 
  
 
  
 
  
 
  
 
  
，当插槽有多个的时候










，需要使用具名插槽 <slot name="xxx">
  
  
  
  
  
 ，用于将数据绑定在指定的插槽

普通插槽

//父组件 <templatev-slot> <p>newNian糕</p> </template> //旧语法只需一行：<pslot>oldNian糕</p> //子组件 <slot/>

具名插槽

//父组件 <templatev-slot:item> <p>newNian糕</p> </template> //旧语法：<pslot="item">oldNian糕</p> //子组件 <slotname="item"/>

作用域插槽为子组件 <slot> 绑定属性  
  
  
  
  
 ，传递数据给父组件
 


 


 


 


 


 
，父组件通过 v-slot:xxx="props" 接收子组件传递的属性

作用域插槽 旧语法

//父组件 <pslot="love"slot-scope="props">爱old{{props.name}}真是太好了</p> //子组件 <slotname="love"v-bind="{name}"/> exportdefault{ data(){ return{ name:"Nian糕" } } }

作用域插槽 新语法

//父组件 <templatev-slot:love="props"> <p>爱new{{props.name}}真是太好了</p> </template> //子组件 <slotname="love"v-bind="{name}"/> exportdefault{ data(){ return{ name:"Nian糕" } } }

案例2

//子组件：(假设名为：ebutton) <template> <divclass=button> <button>test</button> <slotname=one:value1=child1>这就是默认值1</slot>//绑定child1的数据 <slot:value2=child2>这就是默认值2</slot>//绑定child2的数据
 
 
 
 
 
，这里我没有命名slot </div> </template> <script> newVue({ el:.button, data:{ child1:数据1, child2:数据2 } }) </script> //父组件：（引用子组件ebutton） <template> <divclass=app> <ebutton> <templatev-slot:one=slotone> {{slotone.value1}}//通过v-slot的语法将子组件的value1值赋值给slotone </template> <templatev-slot:default=slottwo> {{slottwo.value2}}//同上   
   
   
   
   
  ，由于子组件没有给slot命名
 

 

 

 

 

 
，默认值就为default </template> </ebutton> </div> </template>

Vue3.0 slot简写

<!--父组件中使用--> <templatev-slot:content="scoped"> <divv-for="iteminscoped.data">{{item}}</div> </template> <!--也可以简写成：--> <template#content="{data}"> <divv-for="itemindata">{{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

constA=(props,{slots})=>( <div> <h1>{slots.default?slots.default():foo}</h1> <h2>{slots.bar?.()}</h2> </div> ); constApp={ setup(){ constslots={ bar:()=><span>B</span>, }; return()=>( <Av-slots={slots}> <div>A</div> </A> ); }, }; //or constApp={ setup(){ constslots={ default:()=><div>A</div>, bar:()=><span>B</span>, }; return()=><Av-slots={slots}/>; }, }; //or constApp={ 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>ImChild</span> <slot></slot> <slotname="header"></slot> </div> </template> <script> exportdefault{ name:"Test" } </script> 父组件 <template> <TestComponent> <template#default> <span>这是默认插槽</span> </template> <template#header> <span>这是header插槽</span> </template> </TestComponent> </template> <script> importTestComponentfrom./TestComponent exportdefault{ name:"Parent", components:{ TestComponent } } </script>

JSX的写法:

子组件 import{defineComponent}from"@vue/runtime-core"; exportdefaultdefineComponent({ name:"Test", render(){ return( <> <span>ImChild</span> {this.$slots.default?.()} {this.$slots.header?.()} </> ) } }) 作用域插槽 import{defineComponent}from"@vue/runtime-core"; exportdefaultdefineComponent({ name:"Test", setup(){ return{ value:{ name:xzw } } }, render(){ return( <> <span>ImChild</span> {this.$slots.content?.(this.value)} </> ) } }) 父组件 import{defineComponent}fromvue importTestComponentfrom./TestComponent exportdefaultdefineComponent({ name:"Test", components:{ TestComponent }, render(){ return( <TestComponentv-slots={{ default:()=>( <div>这是默认插槽</div> ), header:()=>( <div>这是header插槽</div> ) }}> </TestComponent> ) } }) 作用域插槽 import{defineComponent}fromvue importTestComponentfrom./TestComponent exportdefaultdefineComponent({ name:"Test", components:{ TestComponent }, render(){ return( <TestComponentv-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