美文网首页
vue里面slot插槽的使用方法(初步认识)

vue里面slot插槽的使用方法(初步认识)

作者: 百里悠然_卤蛋君 | 来源:发表于2018-11-26 11:22 被阅读0次

    学vue有一段时间了,一直没用过这个slot插槽,最近使用一直有些困惑,今天实现了使用方法,简单的记录下来。

    由于本身技术比较初级,在看官方文档的时候感觉template的写法跟我们工作中的import的写法有出入,而且官方的写法也很零碎,总是抵抗去看文档。

    初步认识,理解浅显勿喷。slot插槽的使用方法其实就是类似于一个子组件或者标签的引用的过程,在父组件里面定义一个slot,给她起个name叫“二狗”,然后组件引入到子组件,子组件里面有个元素的属性slot值等于name的值‘二狗’,然后父组件里面没有值的时候就可以显示子组件里面的信息了(切记:插槽slot要写在父组件里面!!!)。

    贴代码 父组件

    父组件的代码

    子组件

    子组件的代码

    以上,就是基本的slot的用法,不包括slot-scope和传值。

    相关文章

      网友评论

          本文标题:vue里面slot插槽的使用方法(初步认识)

          本文链接:https://www.haomeiwen.com/subject/wzpwqqtx.html