zoukankan      html  css  js  c++  java
  • 插槽slot

    普通插槽

    定义插槽

    带name属性的为具名插槽,不带name属性的是默认插槽(会带有隐含的名字default)

    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
    

    填充插槽内容

    具名内容必须在template元素内定义,通过v-slot绑定,

    <base-layout>
      <template v-slot:header>
        <h1>Here might be a page title</h1>
      </template>
    
      <template v-slot:default>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </template>
    
      <template v-slot:footer>
        <p>Here's some contact info</p>
      </template>
    </base-layout>
    

      

     作用域插槽

    如果想让插槽内容,能够访问子组件中的数据,需要使用作用域插槽

    绑定属性

    通过v-bind,把数据作为slot插槽的一个属性绑定,称为插槽 prop

    <slot v-bind:user="user">
        {{ user.lastName }}
      </slot>
    

    访问子组件属性

    <current-user>
      <template v-slot:default="slotProps">
        {{ slotProps.user.firstName }}
      </template>
    </current-user>

    解构插槽props

    <current-user v-slot="{ user }">
      {{ user.firstName }}
    </current-user>

    具名插槽简写

    #号后面必须跟插槽name

    <current-user #default="{ user }">
      {{ user.firstName }}
    </current-user>
    

      

      

  • 相关阅读:
    概率面试题
    机器学习概率题总结(转载)
    筛素数以及判断数是否是素数
    腾讯2019正式批春笔试题
    推荐系统架构
    文本表示与匹配
    CTR预估经典模型总结
    spark运行原理
    leetcode 字符串动态规划总结
    无向图的邻接矩阵创建代码以及深度遍历广度遍历
  • 原文地址:https://www.cnblogs.com/liuxiaoru/p/13752793.html
Copyright © 2011-2022 走看看