Vue.js---插槽

使用场景：

        父组件需要给子组件填充 HTML 元素，即子组件的某些元素需要由父组件来决定是否显示或者决定显示的内容。也可用于同一组件呈现出不同的效果。

默认插槽：

        直接在父组件的组件标签内部编写 HTML，然后在子组件通过 <slot></slot> 标签将这些元素放到子组件的某个位置。

//父组件
//在子组件加入一张图片
    <category title="美食" :listdata="foods">
      <img src="xxx" alt="">
      </div>
    </category>

//子组件
<div class="category">
      <h3>{{title}}</h3>
      <ul>
        <li v-for="(i, index) in listdata" :key="index">{{i}}</li>
      </ul>
      <slot></slot>
</div>
//将该图片放到无序列表后面

具名插槽：

        主要用于一个子组件需要用到多个插槽，可以指定哪些 HTML 元素放到哪个插槽。实现方法是给插槽 slot 加上 name 属性，在父组件的 HTML 元素指定 slot 属性。

//父组件
//将img放在插槽名为mid处 将div放到插槽名为foot处
<category title="美食" :listdata="foods">
    <img src="aaa" alt="" slot="mid">
    <div slot="foot" class="footer">
        <a href="xxx" >abc</a>
        <a href="yyy">qwe</a>
    </div>
</category>

//子组件
  <div class="category">
      <h3>{{title}}</h3>
      <ul>
        <li v-for="(i, index) in listdata" :key="index">{{i}}</li>
        <slot name="mid"></slot>
        <slot name="foot"></slot>
      </ul>
  </div>

作用域插槽：

        主要用于需要在父组件给子组件编写 HTML 元素且需要用到子组件的 data 的情况，即可以进行子组件给父组件传递数据。

//子组件
//传递数据 games
<slot :games="games"></slot>

//父组件
//得到的是一个对象 用 scope 属性获取 scope 是对传过来的对象的命名
//传过来的对象里面带有所需要的数据
//需要将 HTML 元素写在一个 template 里面
//要获取传递过来的games 需要 asd.games 才能得到需要的数据
 <template scope="asd">
    {{asd.games}}
    <ul>
        <li v-for="(i, index) in asd.games" :key="index">{{i}}</li>
    </ul>
</template>

欢迎指正！