• vue--slot个人理解


    看到网上形形色色的关于solt的解释:

    我也来说说吧,谈谈自己的理解。

    首先是具名插槽:

    先上图:

    这是 header.vue,在开发中不同页面的header常常是不同的,怎么办?判断?还是每个页面都写一个?

    这个时候 solt就起作用了,我们把header变成一个公用组件,当作一个插板,里面的solt标签都是插口,把我们其他页面将要用到的所有组件或者元素都暂时用slot代替。

    就相当于可换头的螺丝刀一样,header这样的公用组件就是螺丝刀的刀柄,而上面的刀头就是即将插进去的slot元素,不同于生活中的螺丝刀的仅仅是 公共组件这个螺丝刀 有很多可以插刀头的插口。

    当我在刚进入login页面的时候,我要header显示关于login的一些元素,那么我在login里面使用header这个组件,并且在header标签中填充和header的slot插口一致的 slot元素,如下:

    slot='logo'的这个span元素就插到了 之前<slot name="logo"></slot>这个插口里面了

    这个header中的ele.me就是插进的logo 

    如果 换了页面,header要变化了,那么现在我们跳转到home页面看看

    同样是使用header组件,不过我们这次不插入 logo了,我们插入search 和 msite-title这两个 slot元素,

    同样的,在header组件里也有search,msite-title这2个的插口 ,因为没有插入logo,所以在home页面,显示了 search和msite-title,而没有显示logo。

    以上就是 具名插槽的使用,我们在父亲页面里面使用 header组件的时候,父亲页面可以在header组件中 添加 一些 带有slot属性的标签,那么渲染的时候当前的dom就会替换子组件(header)中的同名插槽。

    还有就是 匿名插槽的使用,顾名思义,匿名插槽就是不带name 的 slot,父亲页面的 header组件中添加的标签将会替换 子组件(header)中的插槽。

    现在vue又升级出一个 作用域插槽,它的作用支持 父亲页面直接访问到 组件插槽的props。

    类似下方:

    在父亲页面里面 引用 child组件,然后 我们在child组件中 添加一个 h2 的 dom结构,并且使用slot-scope属性,那么 我们将可以拿到 这个child 的 data属性。

     大家也不用太纠结什么时候该用这个东西,引用一句话来说就是:

    当你遇到了该用的场景,你自然会想起使用作用于插槽。----沃.镃基.硕得

  • 相关阅读:
    Silverlight 操作Excel 中的进程资源释放问题
    Silverlight DataGridTemplateColumn 中绑定事件
    Silverlight 设置DataGrid中行的提示信息
    判断Excel单元格中是否有错
    读取配置文件生成简单的网站导航菜单
    HTTP 错误 500.21 Internal Server Error
    忽然有用到DataSet,标记学习一下
    Silverlight读取包含中文的txt(解决乱码问题)
    for/foreach/linq执行效率测试
    将object强制转换成int效率测试
  • 原文地址:https://www.cnblogs.com/zwhblog/p/8080875.html
Copyright © 2020-2023  润新知