vuejs的slot(插槽)

2017-05-08

vue2出了一个slot(插槽)功能,这个功能是用来干嘛的?

无名slot

我的理解就是一个组件元素里面的内容分发到指定的slot位置,例如,我们有一个模板

<template id="layout-tpl">
	<div>
        <slot><h1>my-comp里面没内容,我显示</h1></slot>
	</div>
</template>

然后我们定一个组件

Vue.component("myComp", {
  template: "#layout-tpl"
});

然后要使用它

<div id="app">
	<my-comp></my-comp>
</div>

由于 my-comp 元素里面内容为空,所以slot会显示,结果渲染为

<div id="app">
	<h1>my-comp里面没内容,我显示</h1>
</div>

如果 my-comp 有内容,slot就会被替换,查看效果

具名slot

具名我理解为有具体的名字,声明如下

<slot name="header"></slot>

有了具体名字,那么元素就可以插入到指定的位置

功能更上面一样,就是替换组件元素里面内容,把内容插入到指定的位置

从上面效果可以看出,my-comp元素里面的内容,有指定slot属性的话,就会从上而下按顺序插到对应slot的位置,没有指定slot属性的话就插到无名子的slot位置

标签: javascript vue2

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
React17.0生命周期调整
在即将到来的react17.0版本,react团队对生命周期做了调整,将会移除 componentWillMount,c...
webpack插件实现
webpack 插件是由「具有 apply 方法的 prototype 对象」所实例化出来的。这个 apply 方法在安...