快捷導(dǎo)航

詳解vue slot插槽的使用方法

更新時(shí)間：2017年06月13日 16:48:09 作者：22337383

本篇文章主要介紹了詳解vue slot插槽的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

官方文檔其實(shí)已經(jīng)講得很詳細(xì)，我根據(jù)文檔，把官方的小案例實(shí)現(xiàn)了一下，這樣更直觀

<!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>
    <h1>組件標(biāo)題</h1>
    <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>
   <h1>組件標(biāo)題</h1>
   <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)行查看效果