vue-cli 工程中 作用域 插槽 使用

具体解释参考文档

代码实例:

在父组件中 我现在在 app.vue中

<template>
  <div id="app">
    <!-- 使用组件 -->
    <three>
      <!-- 作用域插槽 -->
      <!-- 具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板 -->
      <!-- slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
      <template slot-scope="book">
        <span>{{ msg }}</span>
        <ul>
          <li v-for="(a,index) in book.text" :key="index">
            {{ a.name }}
          </li>
        </ul>
      </template>
    </three>
  </div>
</template>
<script>
    import three from './components/three'
    export default {
      components:{
        three
      },
      data(){
        return{
          msg:'我是父组件里的信息'
        }
      }
    }
</script>

子组件three.vue

<template>
    <div class="three">
        <slot :text="arr"></slot>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                arr:[
                    {name:'vue.js'},
                    {name:'html权威'},
                    {name:'css3'},
                ]
            }
        }
    };
</script>