码迷,mamicode.com
首页 > 其他好文 > 详细

vue的插槽slot

时间:2019-05-18 09:15:48      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:ima   alt   mic   nbsp   属性   div   问题   inf   src   

slot分为匿名插槽和具名插槽

1.匿名插槽

首先问一个问题:如果引用过来的子组件标签里有内容,那么怎么显示? 答:在子组件加个slot标签就可以了。所以可以说,slot标签是用于显示引用的子组件中的内容。

父组件引用子组件,子组件标签里,如果有内容,那么slot标签的内容不显示,如果子组件标签没有内容,那么就显示slot标签里的内容。

父组件:

<template>
  <div id="app">
    <!-- 一个空的子组件   显示slot标签里的内容 -->
    <home></home>
    <home>一个不是空的子组件</home>
   </div>
</template>

子组件:

<template>
<div>
    <!-- 匿名插槽 -->
    <slot>如果子组件里没内容,那么就会显示这里</slot>
</div>
</template>

显示结果:

技术图片

 

 

2.具名插槽

(1)父组件包含要显示的几部分内容,每部分内容加上一个slot属性。

   <home>
      <p slot="s1">这是s1</p>
      <p slot="s2">这是s2</p>
    </home>

(2)给插槽(slot标签)指定一个name属性

    <!-- 具名插槽 -->
    <slot name="s2"></slot>
    <slot name="s1"></slot>

显示结果:

技术图片

 

vue的插槽slot

标签:ima   alt   mic   nbsp   属性   div   问题   inf   src   

原文地址:https://www.cnblogs.com/luguankun/p/10884405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!