如何在vue中使用slot插槽-創(chuàng)新互聯(lián)

如何在vue中使用slot插槽？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都做網(wǎng)站、黔西南州網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、黔西南州網(wǎng)絡(luò)營(yíng)銷、黔西南州企業(yè)策劃、黔西南州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供黔西南州建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head>

<body>
 <div id="app">
  <div>
   <!-- 單slot -->
   <v-one>
    <!-- 這里的所有內(nèi)容會(huì)替換掉slot -->
    <p>初始化段落一</p>
    <p>初始化段落二</p>
   </v-one>
   <!-- 渲染結(jié)果 -->
   <!-- <div>
    <h2>組件標(biāo)題</h2>
    <p>初始化段落一</p>
    <p>初始化段落二</p>
    <p>組件段落內(nèi)容</p>
    <p>I am one</p>
   </div> -->


   <!-- 具名slot -->
   <v-two>
    <p slot="nav">我是導(dǎo)航</p>
    <p slot="main">我是內(nèi)容</p>
    <p slot="footer">我是底部</p>
   </v-two>
   <!-- 渲染結(jié)果 -->
   <!-- <div>
    <nav>
     <p>我是導(dǎo)航</p>
    </nav>
    <main>
     <p>我是內(nèi)容</p>
    </main>
    <footer>
     <p>我是底部</p>
    </footer>
   </div> -->


   <!-- 作用域插槽 -->
   <v-three>
   <!-- 父組件默認(rèn)無(wú)法使用子組件數(shù)據(jù) -->
     <template scope="props">
       <p>{{props.text}}</p>
     </template>
   </v-three>

   <!-- 渲染結(jié)果 -->
   <!-- <div><p>I am three</p></div> -->
  </div>
 </div>


 <template id="one">
  <div>
   <h2>組件標(biāo)題</h2>
   <slot></slot>
   <p>組件段落內(nèi)容</p>
   <p>{{one}}</p>
  </div>
 </template>


 <!-- 具名slot -->
 <template id="two">
  <div>
   <nav>
    <slot name="nav"></slot>
   </nav>
   <main>
    <slot name="main"></slot>
   </main>
   <footer>
    <slot name="footer"></slot>
   </footer>
  </div>
 </template>

<!-- 作用域插槽 -->
 <template id="three">
  <div>
    <!-- 把數(shù)據(jù)傳遞給slot,這樣父組件也可以訪問(wèn)three這個(gè)組件的數(shù)據(jù) -->
   <slot :text="three"></slot>
  </div>
 </template>
 <script>
 new Vue({
  el: '#app',
  components: {
   'v-one': {
    template: '#one',
    data() {
     return {
      'one': 'I am one'
     }
    }
   },
   'v-two': {
    template: '#two',
    data() {
     return {
      'two': 'I am two'
     }
    }
   },
   'v-three': {
    template: '#three',
    data() {
     return {
      'three': 'I am three'
     }
    }
   }
  }
 });
 </script>
</body>

</html>

單個(gè)slot使用最簡(jiǎn)單，也是最常用的，當(dāng)我們定義了一個(gè)子組件，父組件在使用的這個(gè)組件的時(shí)候，想在內(nèi)部自定義一些初始化數(shù)據(jù)，這時(shí)候就可以用slot實(shí)現(xiàn)。

具名slot只是給slot加了name屬性，在使用的時(shí)候可以引入多個(gè)。

作用域slot就比較強(qiáng)大了，我們知道子組件的數(shù)據(jù)，在父組件中是無(wú)法使用的，但是通過(guò)官方提供的擴(kuò)展，可以輕松實(shí)現(xiàn)這一點(diǎn)。

渲染后效果圖，可以直接自己在瀏覽器運(yùn)行查看效果

如何在vue中使用slot插槽

關(guān)于如何在vue中使用slot插槽問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：如何在vue中使用slot插槽-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article16/dejjdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、小程序開(kāi)發(fā)、網(wǎng)站策劃、App設(shè)計(jì)、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容