vue中插槽solt的使用

vue中插槽solt的使用vue中插槽solt的使用

大家好,欢迎来到IT知识分享网。

solt就是插槽 默认会把组件中间的内容渲染出来

案例:

在app.vue中 直接在组件模版里写内容 是不会在页面中显示的

vue中插槽solt的使用

这个时候 就在card子组件里 写上solt标签 solt标签就代表根组件里那个div

vue中插槽solt的使用

运行结果:

vue中插槽solt的使用

具名插槽

card文件:

<template>
  <div>
    <div class="header">
      <p>我是卡片</p>
    </div>
    <div class="body">
      <slot></slot>
    </div>
  </div>
</template>

 在app.vue中 写两个div 则都会显示在类名body里

vue中插槽solt的使用

vue中插槽solt的使用 

 

如果想要把第一段div里内容显示在header里 就可以使用具名插槽

此时 只需要 在插槽里给一个名字即可

<!--card.vue-->
<template>
  <div>
    <div class="header">
        <slot name="headers"></slot>
      <p>我是卡片</p>
    </div>
    <div class="body">
      <slot></slot>
    </div>
  </div>
</template>

vue中插槽solt的使用

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/14012.html

(0)
上一篇 2024-03-04 09:45
下一篇 2024-03-04 19:26

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信