插槽的使用

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

不具名插槽，如下：

　　父组件的内容如下：

<template>
  <div id="app">
    <home>
      <p>hello lanyb</p> //父组件往子组件中插入的内容
    </home>
  </div>
</template>

　　子组件中的内容如下：

<template>
  <div>
    hello world
    <slot></slot> //父组件要插入的内容将插入在此处
  </div>
</template>

输出结果为：

hello world
hello lanyb

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

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

　　父组件中的内容，如下：

<template>
  <div id="app">
    <home>
      <p slot="header">hello lanyb</p> //定义两个具名插槽
      <p slot="ender">hello world</p> //定义两个具名插槽
    </home>
  </div>
</template>

　　子组件中的内容，如下：

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

显示结果为：

hello world
我是分割线
hello lanyb

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

（2）vue中的插槽作用域

　　首先是1个示例，如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) of list" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      list: [1, 2, 3, 4]
    }
  }
}
</script>

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

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

<template>
  <div>
    <ul>
      <slot //具体怎么显示子组件并不关心，故将数据传递给父组件，让父组件自己去显示
        v-for="item of list"
        :item="item"
      >
      </slot>
    </ul>
  </div>
</template>

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

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

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