父组件向子组件传值我们会一般用到props,那传递一个DOM节点呢?
使用插槽slot,能高效地解决父组件向子组件插入DOM节点问题。
插槽:在vue中,可以在组件内部定义一个或多个插槽,子组件决定插槽的位置,也可以设置默认的信息,父组件在插槽里插入信息,有默认信息时,父组件不插入信息,则显示子组件的默认信息;
下面就列举下关于插槽的使用方式:
1、匿名插槽
//组件(父)
<child>
<p>父页面</p> //匿名插槽即为默认插槽,也可以写成 <template v-slot:default><p>父页面</p></template>
</child>
//组件(子)
<div class="child-page">
<h1>子页面</h1>
<slot></slot>
</div>
//页面渲染结果
<div class="child-page">
<p>父页面</p>
</div>
2、具名插槽
v-slot只能添加在插槽的模板template上,如果组件里只有默认插槽时,组件的标签才可以被当作插槽的模板来使用;
<child v-slot:default="child"></child>
//组件(父)
//写法一:
<child>
<template v-slot:child><p>父页面</p></template>
</child>
//写法二(综合写法一的简写):
<child>
<template #child><p>父页面</p></template>
</child>
//组件(子)
<div class="child-page">
<slot name="child">子页面</slot>
</div>
//页面渲染结果
<div class="child-page"><p>父页面</p></div>
动态的具名插槽:
//组件(父)
<child>
<template #[slotName]><p>父页面</p></template>
</child>
//组件(父)js:
data(){
return(){
slotName:'two'
}
}
3、作用域插槽
//组件(父)
//写法一:
<child>
<template #childName="data"><p>{{data.child}}</p></template>
</child>
//组件(子)
<div class="child-page">
<slot :data="uesrs" name="childName"></slot>
</div>
//组件(子)js:
data(){
return(){
childData:'子组件传参',
}
}
//页面渲染结果
<div class="child-page"><p>子组件传参</p></div>
子组件有多个相同名字的插槽,在父组件中同一个组件标签只插入一条插槽信息,会显示多个相同的插槽信息;
//组件(父)
<child>
<template #child><p>父页面</p></template>
</child>
//组件(子)
<div class="child-page">
<slot name="child">子页面</slot>
<slot name="child">子页面2</slot>
<slot name="child">子页面3</slot>
</div>
//页面渲染结果
<div class="child-page">
<p>父页面</p>
<p>父页面</p>
<p>父页面</p>
</div>
如果父组件里同一个子组件的标签有多条相同的插槽信息,但是子组件只有一个插槽,那只会显示父组件的最后一条插槽信息;