Vue系列之-插槽-具名插槽

·  阅读 505

具名插槽就是給这个插槽起个名字以便能复用

<div id='app'>
    这里是父组件
    <child :message='message'>
          <template v-slot:header>
              这里是头
          </template>
          <template>
              这里是中间部分
          </template>
          <template v-slot:bottom>
              这里是尾巴
          </template>
     </child>
 </div>
 <script>
	Vue.component('child',{
         props:['message'],
         template:'<div><slot></slot><slot name="header"></slot><slot name="bottom"></slot></div>'
	})
       new Vue({
       	el:'#app',
       	data:{
       		message:'这里是子组件'
       	},
       })
</script>复制代码

运行结果如下:

上方代码,运行结果是按照模版中的样式显示的,<slot></slot>是没有名字的普通的插槽,所以显示的是中间部分,因为中间部分的template我没有給名字

再看下方代码:

<div id='app'>
     这里是父组件
     <child :message='message'>
          <template v-slot:header>
              这里是头
          </template>
          <template>
              这里是中间部分
          </template>
          <template v-slot:bottom>
              这里是尾巴
          </template>
           <template>
           这里也是中间部分
          </template>
          <template v-slot:bottom>
            这里是另一个尾巴
          </template>
        </child>
	</div>
	<script>
	Vue.component('child',{
         props:['message'],
         template:'<div><slot></slot><slot name="header"></slot><slot name="bottom"></slot></div>'
	})
       new Vue({
       	el:'#app',
       	data:{
       		message:'这里是子组件'
       	},
       })
</script>复制代码

运行结果:


他把没有名字的两部分连同v-slot:bottom识别为普通插槽所以‘这是尾巴’没有显示,最后一个v-slot:bottom为名字为bottom的插槽




分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改