vue slot插槽

元素作为承载分发内容的出口 --官方文档的定义

slot 实现的就是内容分发,实际上就是为了让组件可以组合,用一种方式来混合父组件的内容和子组件自有的模板.

实际在项目中应用是:例如有一个弹框是固定的模板,但是这个提示框要根据放到不同的产品页面显示不同产品信息。
slot 到底是什么意思--看图


vue slot插槽_第1张图片
vue slot插槽_第2张图片

根据是否设置name这个属性,分为匿名插槽、具名插槽

匿名插槽:

1 子组件定义为


  

2 父组件这样去使用子组件


Your Profile

3 渲染出来的 HTML


  Your Profile

具名插槽:

1 组件定义为

 

我是标题,你也可以动态传入

想要展示的内容 你不写就展示我现在的内容

2 父组件这样使用alert组件

//组件的其他部分
其他部分

确 定

//插槽

你想在你的页面显示啥就写啥呗

我就是不想和你原来的一样

3 渲染出来的 HTML

  
//组件的其他部分
其他部分

确 定

//插槽

我是标题,你也可以动态传入

你想在你的页面显示啥就写啥呗

我就是不想和你原来的一样

你可能感兴趣的:(vue slot插槽)