zoukankan      html  css  js  c++  java
  • vue插槽的使用

    插槽的功能

    • 插槽是为了使设备具有扩展性,而组件中的插槽同样是为了使组件具有扩展性

    插槽的使用方式

    • 抽取共性,保留不同
      • 将共性抽取到组件中,将不同暴露为插槽
      • 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容

    插槽的基本使用

    • 使用特殊标签<slot></slot>即可设置一个插槽
    <div>
        <h2>我是组件</h2>
        <h3>我也是组件</h3>
        <slot></slot>
    
    • 往组件中插入内容,该内容即就会在插槽中显示
    • 如果一次性插入多条内容,这些内容会全部在插槽位置显示
    <cpn><button>按钮</button></cpn>
    <cpn><input type="text">文本框</cpn>
    <cpn>
        <h3>哈哈</h3>
        <p>嘿嘿</p>
        <a href="#">嘻嘻</a>
    </cpn>
    
    • 插槽也可以有默认值。当在插槽中没有插入内容时,插槽位置就会显示默认值
    <slot><button>默认值</button></slot>
    
    <!-- 未往插槽插入内容时,默认显示一个按钮 -->
    <cpn></cpn>
    

    具名插槽

    ​ 当子组件功能较为复杂时,子组件的插槽可能并非只有一个。如一个导航栏,可能就需要三个插槽,分别表示左边、中间、右边,那么在外面给插槽插入内容时,如何区分插槽是哪一个呢,此时就需要为插槽起一个名字

    • 通过为特殊标签slot绑定一个属性name即为命名插槽
    <slot name="left"><span>左边</span></slot>
    <slot name="middle"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
    
    • 往指定插槽插入内容 -> slot="插槽的name值"
    <cpn><input type="search" slot="middle" />搜索框</cpn>
    

    作用域插槽

    • 使用子组件的任何数据,来达到自定义显示内容的目的
    • 父组件替换子组件插槽的标签,但是内容由子组件提供使用slot-scope实现,将这个属性绑定到template模板中
    <cpn>
        <!-- 作用域插槽,使用slot-scope实现,将这个属性绑定到子组件的template中 -->
        <template slot-scope='slota'>
            <!-- datate即为PLanguages数组,遍历该数组 -->
            <span v-for="item in slota.datate">{{item}} /</span>
        </template>
    </cpn>
    
    <template id="cpn">
        <div>
            <!-- 将plangues数组动态绑定给datate -->
            <slot :datate="pLanguages">
                <ul>
                    <li v-for="item in pLanguages">{{item}}</li>
                </ul>
            </slot>
    
  • 相关阅读:
    git
    浏览器喧嚷过程
    B/S架构与C/S架构
    simpleDateFormat
    oracle中case when的用法
    Java程序利用Jdbc连接数据库
    List 和 Set与Map
    队列和栈
    toString方法分析
    java中的构造器
  • 原文地址:https://www.cnblogs.com/jincanyu/p/14351370.html
Copyright © 2011-2022 走看看