vue slot插槽

Posted 2020-11-03 giser123

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块具有模块化的特质和更大的重用性。

单个插槽

1. <template>
2.     <div id="example">
3.         <h1>我是父组件的标题</h1>
4.         <app-layout>
5.  
6.  
7.           <p>主要内容的一个段落。</p>
8.           <p>另一个主要段落。</p>
9.  
10.           <p slot="footer">这里有一些联系信息</p>
11.           <h1 slot="header">这里可能是一个页面标题</h1>
12.         </app-layout>
13.     </div>
14. </template>
15. <script>
16.     export default{
17.         components:{
18.             ‘app-layout‘: {
19.                 template: `
20.                     <div>
21.                       <h2>我是子组件的标题</h2>
22.                       <slot>
23.                         只有在没有要分发的内容时才会显示。
24.                       </slot>
25.                     </div>
26.                 `,
27.             }
28.         }
29.     }
30. </script>

执行结果

1. <div>
2.   <h1>我是父组件的标题</h1>
3.   <div>
4.     <h2>我是子组件的标题</h2>
5.     <p>这是一些初始内容</p>
6.     <p>这是更多的初始内容</p>
7.   </div>
8. </div>

具名插槽

1. <template>
2.     <div id="example">
3.         <h1>我是父组件的标题</h1>
4.         <app-layout>
5.           <h1 slot="header">这里可能是一个页面标题</h1>
6.  
7.           <p>主要内容的一个段落。</p>
8.           <p>另一个主要段落。</p>
9.  
10.           <p slot="footer">这里有一些联系信息</p>
11.         </app-layout>
12.     </div>
13. </template>
14. <script>
15.     export default{
16.         components:{
17.             ‘app-layout‘: {
18.                 template: `
19.                     <div class="container">
20.                       <header>
21.                         <slot name="header"></slot>
22.                       </header>
23.                       <main>
24.                         <slot></slot>
25.                       </main>
26.                       <footer>
27.                         <slot name="footer"></slot>
28.                       </footer>
29.                     </div>
30.                 `,
31.             }
32.         }
33.     }
34. </script>

执行结果

1. <div class="container">
2.   <header>
3.     <h1>这里可能是一个页面标题</h1>
4.   </header>
5.   <main>
6.     <p>主要内容的一个段落。</p>
7.     <p>另一个主要段落。</p>
8.   </main>
9.   <footer>
10.     <p>这里有一些联系信息</p>
11.   </footer>
12. </div>

作用域插槽

1. <template>
2.     <div id="example">
3.         <div class="parent">
4.             <child>
5.                 <template slot-scope="props">
6.                     <span>hello from parent</span><br/>
7.                     <span>{{ props.text }}</span>
8.                 </template>
9.             </child>
10.         </div>
11.     </div>
12. </template>
13. <script>
14.     export default{
15.         components:{
16.             ‘child‘: {
17.                 template: `
18.                     <div class="child">
19.                       <slot text="hello from child"></slot>
20.                     </div>
21.                 `,
22.             }
23.         }
24.     }
25. </script>

执行结果为

1. <div class="parent">
2.   <div class="child">
3.     <span>hello from parent</span>
4.     <span>hello from child</span>
5.   </div>
6. </div>