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

vue slot使用

时间:2019-06-24 10:39:59      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:图片   pre   指定   div   bsp   src   image   一个   技术   

定义一个父组件

 1.如果指定了 slot="slotA"

<template>
  <div class="home">
    我是父组件
    <Child>
      <p slot="slotA">hello world</p>
    </Child>
  </div>
</template>

 

<template>
  <div class="child">
    <p>我是子组件</p>
    <slot name="slotA">slot1</slot>
  </div>
</template>

技术图片

 

 

2.如果没有指定slot,页面一样会显示

<template>
  <div class="home">
    我是父组件
    <Child>
      <p>hello world</p>
    </Child>
  </div>
</template>
<template>
  <div class="child">
    <p>我是子组件</p>
    <slot>slot1</slot>
  </div>
</template>

技术图片

 

 

如果存在多个slot用第一种方法 指定name

父组件如果没有指定name,子组件却定义了name,是找不到对应的slot

 

vue slot使用

标签:图片   pre   指定   div   bsp   src   image   一个   技术   

原文地址:https://www.cnblogs.com/zhangYaRan/p/11075678.html

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