詳解vue slot插槽的使用方法

2019-11-19 16:20:36

字體：大中小

來源：轉載

供稿：網友

官方文檔其實已經講得很詳細，我根據文檔，把官方的小案例實現了一下，這樣更直觀

<!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>    <!-- 這里的所有內容會替換掉slot -->    <p>初始化段落一</p>    <p>初始化段落二</p>   </v-one>   <!-- 渲染結果 -->   <!-- <div>    <h1>組件標題</h1>    <p>初始化段落一</p>    <p>初始化段落二</p>    <p>組件段落內容</p>    <p>I am one</p>   </div> -->   <!-- 具名slot -->   <v-two>    <p slot="nav">我是導航</p>    <p slot="main">我是內容</p>    <p slot="footer">我是底部</p>   </v-two>   <!-- 渲染結果 -->   <!-- <div>    <nav>     <p>我是導航</p>    </nav>    <main>     <p>我是內容</p>    </main>    <footer>     <p>我是底部</p>    </footer>   </div> -->   <!-- 作用域插槽 -->   <v-three>   <!-- 父組件默認無法使用子組件數據 -->     <template scope="props">       <p>{{props.text}}</p>     </template>   </v-three>   <!-- 渲染結果 -->   <!-- <div><p>I am three</p></div> -->  </div> </div> <template id="one">  <div>   <h1>組件標題</h1>   <slot></slot>   <p>組件段落內容</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>    <!-- 把數據傳遞給slot,這樣父組件也可以訪問three這個組件的數據 -->   <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>

單個slot使用最簡單，也是最常用的，當我們定義了一個子組件，父組件在使用的這個組件的時候，想在內部自定義一些初始化數據，這時候就可以用slot實現。

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

作用域slot就比較強大了，我們知道子組件的數據，在父組件中是無法使用的，但是通過官方提供的擴展，可以輕松實現這一點。

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