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>