• Vue中的slot


    个人理解:
    是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参;

    Slot的通俗理解

    是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容;


    Slot使用
    1、组件中有单个或多个未命名slot标签时,如下:
    <Child><span style=”color:red;”>hello world</span></Child>   

    <template>    

      <div>

    <slot></slot>

    <slot  style=”color:blue;” >这是在slot上添加了样式</slot>

    <slot  name=”mySlot”>这是拥有命名的slot的默认内容</slot>

    </div>

    </template>

    会输出:两个红色的hello world,以及一个使用slot的默认内容

    注意:在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换,会显示slot的默认值(具名slot具有对应性);


    2、组件中有多个命名的slot插槽时,可以实现父组件对子组件的指定位置显示内容或传参,如下:

    <Child>

    <span slot="header">hello world</span>

    <span slot="main">hello world</span>

    <span slot="footer">hello world</span>

    <span slot="other">{{otherData}}</span>

    </Child>

    <template>

    <div>

    <slot  name=”header”>这是拥有命名的slot的默认内容</slot>

    <slot  name=”main”>这是拥有命名的slot的默认内容</slot>

    <slot  name=”footer”>这是拥有命名的slot的默认内容</slot>

    <slot  name=”other”>这是拥有命名的slot的默认内容</slot>

    </div>

    </template>

    3、作用域插槽!!:
    使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签,再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;

    作用域插槽代表性的用例是列表组件,允许在parent父组件上对列表项进行自定义显示,如下该items的所有列表项都可以通过slot定义后传递给父组件使用,也就是说数据是相同的,不同的场景页面可以有不同的展示方式:

       <ul>

          <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >

             slot的默认内容

          </slot>

       </ul>

       <Child>

          <template slot="item" scope="props">

            <li>{{props.myname}}</li>

          </template>

       </Child>

  • 相关阅读:
    JAVA下使用 连接sqlserver 驱动包
    Windows 7 、Windows Server 2008 和 Windows Server 2008 R2 的支持结束
    VBoxManage命令详解
    端口扫描之王——nmap入门精讲
    rehat-server7常见服务安装与配置总结
    mysql的安装和密码管理、mysql初始密码查找、密码修改、mysql登录
    vim常用命令总结 (转)
    关于《Python绝技:运用Python成为顶级黑客》的学习笔记
    常用MySQL图形化管理工具
    Chrome谷歌浏览器离线安装包下载
  • 原文地址:https://www.cnblogs.com/xutao1517588477/p/10922764.html
Copyright © 2020-2023  润新知