vue自学入门-8（vue slot-scope）

2024-10-08 09:15:45

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没有什么区别

最新文章

热门文章