Vue slot简单理解

情形一:

子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序

子组件:

Vue.component('child',{
        template:`<div class="child"><slot name="one"></slot><slot name="two"></slot></div>`
    });

父组件使用子组件:

<child>
        <h1 slot="two" class="two">woshi  two</h1>
        <h2 slot="one" class="one">woshi  one</h2>
</child>

显示顺序按照子组件slot定义的顺序。

情形二:

子组件定义了不具名的slot,父组件直接使用子组件,并可以直接在子组件中写内容

子组件:

Vue.component('btn',{
        template:`<div class="button">
    <slot></slot>
</div>`
    });

父组件:

<btn>
        按钮
</btn>

情形三:

子组件slot中定义了默认内容,如果父组件引入了子组件,且不写内容,则显示子组件默认内容,子组件定义的默认内容也可以提前加任何样式或赋予任何标签。但是slot标签上不可以加任何样式。如果父组件引入定义了slot的子组件,并且赋予了内容,则子组件默认的slot中的标签与样式不会加上去。如果想要给slot加样式,要加在父组件上。

子组件:

Vue.component('aaa',{
        template:`<div>
    <slot><h1 style="color:red">woshi slot默认内容</h1></slot>
</div>`
});

父组件:

<aaa></aaa>
<aaa><h6>哈哈哈哈哈</h6></aaa>
<aaa>哈哈哈哈哈</aaa>

 vue dom元素挂载:

new Vue({
        el:"#app"
 })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android视图绘制流程完全解析,带你一步步深入了解View(二)

在上一篇文章中,我带着大家一起剖析了一下LayoutInflater的工作原理,可以算是对View进行深入了解的第一步吧。那么本篇文章中,我们将继续对View进...

37380
来自专栏前端知识分享

第141天:前端开发中浏览器兼容性问题总结(二)

在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:m...

25720
来自专栏十月梦想

css选择器

            选择器{... !important} 则该选择器的优先级最高

9050
来自专栏超然的博客

自定义按钮~自适应布局~常见bug

24720
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— 利用选择器添加内容

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。   也可以通过变量来实现自定义的标题 1     h1:before{...

23150
来自专栏闻道于事

JavaScript事件与例子

事件,就是预先设置好的一段代码,等到用户触发的时候执行。 一:常见的事件: 1.关于鼠标的事件   onclick 鼠标单击触发   ondblclick 鼠标...

28170
来自专栏向治洪

Android View底层到底是怎么绘制的

Android绘制链图: ? 网上很多讲Android  view的绘制流程往往只讲到了Measure - Layout - Draw。 但是,这只是一个...

27190
来自专栏杂七杂八

HTML初学笔记1

[TOC] 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) ...

43370
来自专栏黑泽君的专栏

day02_css学习笔记

9420
来自专栏余生开发

插件集--页面滚动scrollreveal.js

scrollReveal.js 不依赖其他任何文件。不支持 IE10 以下 基本方法

31440

扫码关注云+社区

领取腾讯云代金券