Vue2.0 slot分发内容与props验证的方法

前端之家收集整理的这篇文章主要介绍了Vue2.0 slot分发内容与props验证的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用一种方式混合父组件的内容与子组件自己的模板,这个过程被称为“内容分发”。在子组件中使用特殊的元素作为内容的插槽。

Slot分发内容

概述:

简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示不显示、在哪个地方显示、如何显示,就是slot分发负责的活。

默认情况下

父组件在子组件内套的内容,是不显示的。

例如代码

12345

显示内容是一个button按钮,不包含span标签里面的内容

一、单个slot

在子组件模板中有slot标签,被视为备用内容,在父组件不提供内容的情况下使用。如果父组件提供内容,则把整个内容片段插入到slot所在的DOM位置,并替换掉slot标签本身。

子组件模板中没有slot标签,父组件提供的内容会被抛弃

如果替换的内容较多,可以直接用一个template替换。

自定义

见证奇迹的时候到了,页面上会显示如下内容

二、有具体名称的slot

元素可以用一个特殊的属性name来配置如何分发内容

自定义

猜你在找的Vue相关文章