vue自學入門-8（vue slot-scope）

vue自學入門-1（Windows下搭建vue環境）

vue自學入門-2（vue創建項目）

vue自學入門-3（vue第一個例子）

vue自學入門-4（vue slot）

vue自學入門-5（vuex state）

vue自學入門-6（vue jsx）

vue自學入門-7（vue style scope）  

vue自學入門-8（vue slot-scope）

vue自學入門-9 @click后直接跟alert報錯

1、修改helloworld代碼如下，綠色部分

 

 2、修改App.Vue代碼如下（user隨便起，改成其它任意名稱都行）

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view>11111111111111
          <template slot-scope="user">
              <ul>
                  <li v-for="(item, index) in user.data" :key="index">{{item}}</li>
              </ul>
          </template>
    </router-view>
  <div>{{count}}</div>
  </div>
</template>

3、顯示結果

 

 

 

 

 4、如果去掉template

 

 顯示結果如下

 

 5、使用兩個template

 

 

 

 

和使用一個效果一樣

6、使用template但不用slot-scope

 

 運行結果

 7、增加附加信息方便對比

如 ：

 

 顯示效果

 

 

8、通過以上測試，可以總結以下幾點

a、如果使用slot-scope，將會使用最后一個slot-scope進行渲染，其它的帶slot-scope數據和其它不帶slot-scople的標簽都會被忽略

b、如果不使用slot-scope，和普通的slot沒有什么區別