vue 作用域插槽

先看下 代码 就会明白

父组件

<template>
  <div class="wrap">
     <Temp :message="books">
        <template slot-scope="books" slot="book">
          <li>{{books.item}}</li>
        </template>
     </Temp>
   </div>
 </template>
<script>
import Temp from '../components/temp'
export default {
  name: 'practice',
  components: { Temp },
  data () {
    return {
      books: [
        { name: 'aaa'},
        { name: 'bbb'},
        { name: 'ccc'}
      ]
    }
  },

子组件：

template>
  <div class="wrapInner">
    <ul>
     <slot v-for="item in message" name="book" :item="item.name">
     </slot>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'temp',
  props: ['message'],
  data: function () {
    return {

    };
  },

效果：

插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。

插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高，更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。

作用域插槽其实就是带数据的插槽。当一个组件需要重复使用时可以用到；

原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。

slot-scope就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。

作用域插槽适合的场景是至少包含三级以上的组件层级，是一种优秀的组件化方案！

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素