亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

slot插槽以及具名插槽

標簽:
Vue.js

今天刚入职新公司,看了新公司的项目代码感觉和之前自己做的项目还是有差距的。自己之前做的项目相对于新公司来说可能还是偏浅,所以无论是框架还是原生的js都要去更加深入的了解才能应对之后的项目。

都知道vue组件可以通过slot插槽插入自定义的信息,但是往更加深入的slot了解的话会发现,slot插槽也有其他更加复杂的场景。
具名插槽就是其中的一个。

具名插槽可以让你可以自定义多处组件中可以插入内容的地方,这对复杂的组件来说谁十分有用的。这边直接上代码了

子组件

<template>
  <div class='list'>
    <slot name="slot1" />
    <div>slot1</div>
    <slot name="slot2" />
    <div>slot2</div>
    <slot name="slot3" />
    <div>slot3</div>
  </div>
</template>

父组件

<ListItem>
        <div slot="slot1">你好1</div>
        <div slot="slot2">你好2</div>
        <div slot="slot3">你好3</div>
      </ListItem>

子组件通过slot标签定义name属性,然后父组件通过slot属性对应子组件的slot标签的name,这样就能在组件相应的位置插入需要的信息了。

新的公司对我来说是一个挑战,也是一个机会这次我要专心的当好我的小兵。期待不就得将来弯道超车!!!加油!!!


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
6
獲贊與收藏
35

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消