插槽的使用

（1）父组件向子组件传递DOM

不具名插槽，如下：

　　父组件的内容如下：

1 <template>
2   <div id="app">
3     <home>
4       <p>hello lanyb</p> //父组件往子组件中插入的内容
5     </home>
6   </div>
7 </template>

　　子组件中的内容如下：

1 <template>
2   <div>
3     hello world
4     <slot></slot> //父组件要插入的内容将插入在此处
5   </div>
6 </template>

输出结果为：

hello world
hello lanyb

以上就是最简单的slot示例。

然后还有具名插槽，如下：

　　父组件中的内容，如下：

1 <template>
2   <div id="app">
3     <home>
4       <p slot="header">hello lanyb</p> //定义两个具名插槽
5       <p slot="ender">hello world</p> //定义两个具名插槽
6     </home>
7   </div>
8 </template>

　　子组件中的内容，如下：

1 <template>
2   <div>
3     <slot name="ender"></slot> //名字叫ender的插槽中的内容会插入至此
4     我是分割线
5     <slot name="header"></slot> //名字叫header的插槽中的内容会插入到此
6   </div>
7 </template>

显示结果为：

hello world
我是分割线
hello lanyb

【注意：不具名插槽只有1个，具名插槽具有多个】

（2）vue中的插槽作用域

　　首先是1个示例，如下：

 1 <template>
 2   <div>
 3     <ul>
 4       <li v-for="(item, index) of list" :key="index">
 5         {{item}}
 6       </li>
 7     </ul>
 8   </div>
 9 </template>
10 
11 <script>
12 export default {
13   name: 'Home',
14   data () {
15     return {
16       list: [1, 2, 3, 4]
17     }
18   }
19 }
20 </script>

　　但是，这种写法被写死了，不能按照自己的方式进行输出；

　　所以，这里要换成根据用户需要显示的方式来进行显示，即在子组件中去掉<li>标签中的内容，即：

 1 <template>
 2   <div>
 3     <ul>
 4       <slot //具体怎么显示子组件并不关心，故将数据传递给父组件，让父组件自己去显示
 5         v-for="item of list"
 6         :item="item"
 7       >
 8       </slot>
 9     </ul>
10   </div>
11 </template>

　　然后，在父组件中的内容为：

1 <template>
2   <div id="app">
3     <home>
4       <template slot-scope="props">
5         <li>{{ props.item }}</li> //props用于接收父组件中item传递过来的值，显示的方式为<li>标签
6       </template>
7     </home>
8   </div>
9 </template>

　　同理，也可以把<li>{{ props.item }}</li>换成<h2>{{ props.item }}</h2>，这样的话，显示的方式为<h2>标签。

 

转载于:https://www.cnblogs.com/lanyb009/p/9235985.html