zoukankan      html  css  js  c++  java
  • vue slot

     

    在实际项目开发当中,时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为slot(插槽)。

    个人理解:插槽(也就是slot)其实就是一块html模板,这个模板是用来做什么的?其实就是用来占位置的。

    slot在子组件中占位置,在父组件中向位置里填充内容。所以这个插槽在哪里显示由子组件自己决定,显示不显示以及怎么显示由父组件决定的。

    插槽主要分为匿名插槽,具名插槽,和作用域插槽。

    匿名插槽:没有通过name属性定义的<slot>元素。一个组件中只能有一个匿名插槽。

    父组件

    子组件

    效果:

     

    在父组件的子组件标签中只要是没有slot属性的元素,其中的内容都会在匿名插槽中展示。

    默认内容:我们可以通过在<slot>元素内添加内容来给插槽设置默认值

    父组件

    子组件

    效果

     

    当父组件的子组件标签中没有填充的内容时,插槽中就会默认展示<slot>元素中定义的默认内容,而父元素的子组件标签中有填充的内容时,默认内容就会被覆盖

    父组件

    子组件

    效果

     

    具名插槽:通过<slot>元素的name属性来定义的额外的插槽。一个组件中可以设置多个具名插槽。

     父组件

    子组件

    效果

    通过name属性定义的插槽只会填充父组件中slot属性值与name属性值相同的元素中的内容,而且该元素中的内容也只会在定义了相同name属性值的插槽中展示。

    编译作用域:标签在哪个组件文件里,就可以取到该文件的数据

    父组件

     

    子组件

    效果

     虽然子组件标签里的内容会通过slot插槽插入到子组件中,但是他们并不能取到子组件里的childUser的值。

    作用域插槽:其实我们也可以把他理解成带数据的插槽

    父组件

    子组件

    效果

     

  • 相关阅读:
    MySQL 优化
    Log4j2 中format增加自定义的参数
    MySQL 索引
    Linux中top和free命令详解(转)
    JAVA面试题
    Servlet3.0的可插拔功能
    开放通用Api,总有你喜欢的
    Git常用命令
    支付宝无法回调或者回调后验签失败
    Promise
  • 原文地址:https://www.cnblogs.com/wangrenmeng/p/10467316.html
Copyright © 2011-2022 走看看