首页 > 其他分享 >vue--day68--插槽的总结

vue--day68--插槽的总结

时间:2023-08-23 22:56:11浏览次数:40  
标签:vue -- 插槽 默认 html 组件 day68

## 插槽

1. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 <strong style="color:red">父组件 ===> 子组件</strong> 。

2. 分类:默认插槽、具名插槽、作用域插槽

3. 使用方式: 

   1. 默认插槽:

      ```vue

      父组件中:

              <Category>

                 <div>html结构1</div>

              </Category>

      子组件中:

              <template>

                  <div>

                     <!-- 定义插槽 -->

                     <slot>插槽默认内容...</slot>

                  </div>

              </template>

      ```

 

   2. 具名插槽:

      ```vue

      父组件中:

              <Category>

                  <template slot="center">

                    <div>html结构1</div>

                  </template>

      

                  <template v-slot:footer>

                     <div>html结构2</div>

                  </template>

              </Category>

      子组件中:

              <template>

                  <div>

                     <!-- 定义插槽 -->

                     <slot name="center">插槽默认内容...</slot>

                     <slot name="footer">插槽默认内容...</slot>

                  </div>

              </template>

      ```

 

   3. 作用域插槽:

      1. 理解:<span style="color:red">数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。</span>(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

      2. 具体编码:

         ```vue

         父组件中:

         <Category>

         <template scope="scopeData">

         <!-- 生成的是ul列表 -->

         <ul>

         <li v-for="g in scopeData.games" :key="g">{{g}}</li>

         </ul>

         </template>

         </Category>

         

         <Category>

         <template slot-scope="scopeData">

         <!-- 生成的是h4标题 -->

         <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>

         </template>

         </Category>

         子组件中:

                 <template>

                     <div>

                         <slot :games="games"></slot>

                     </div>

                 </template>

         

                 <script>

                     export default {

                         name:'Category',

                         props:['title'],

                         //数据在子组件自身

                         data() {

                             return {

                                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']

                             }

                         },

                     }

                 </script>

         ```

   ```

   

   ```

标签:vue,--,插槽,默认,html,组件,day68
From: https://www.cnblogs.com/satisfysmy/p/17652979.html

相关文章

  • Java的深拷贝与浅拷贝的区别
    1、二者的区别浅拷贝:在拷贝一个对象时,对对象的基本数据类型的成员变量进行拷贝,但对引用类型的成员变量只进行引用的传递,并没有创建一个新的对象,当对引用类型的内容修改会影响被拷贝的对象。深拷贝:在拷贝一个对象时,除了对基本数据类型的成员变量进行拷贝,对引用类型的成员变量进行......
  • 数据类型
    JAVA是一种强类型语言要求变量的使用要严格符合规定,所有变量都必须先定义后使用特点:安全性高,速度慢电脑32位最多只能支持4GB,只能装32位操作系统的cpu​64位可以支持128GB,可以装32位和64位的cpu......
  • 参数化-单参数@ValueSource
    引入依赖<!--参数化依赖--><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-params</artifactId><version>5.8.1</version><scope>test</scope></dependency......
  • python rasa聊天机器人教程六:服务器部署
    1.准备环境:宝塔+nginx+docker首先在服务器上安装好宝塔,然后在宝塔里面安装nginx+docker2.创建站点宝塔站点里面创建一个站点 3.上传rasa项目的代码到站点目录把之前在本地运行正常的rasa项目代码上传到服务器站点目录上4.修改index.html代码修改站点目录下/www/wwwroo......
  • 什么是 QoS
    如果设备运行在网络延迟高或者出现网络断线的环境下,只依靠TCP协议是不能完全保证消息可以发送到服务端的。客户端发送数据到服务端的时候,如果网络延迟高TCP是可以保证数据发送到服务端的,但是在发送数据的过程中TCP因为网络原因断开了,当客户端重新连接后,TCP不会重新发送这......
  • 使用 Transformers 优化文本转语音模型 Bark
    ......
  • [论文理解] HACK: Learning a Parametric Head and Neck Model for High-fidelity Ani
    HACK:LearningaParametricHeadandNeckModelforHigh-fidelityAnimation上科大发布的头和脖子精细建模的参数化模型HACK。纹理转化由于HACK没有开源纹理基,我将FLAME开源的纹理基迁移到了HACK上,代码在这里开源:https://github.com/aoru45/FLAME_TO_HACK/tree/main论文......
  • vue--day67--作用域插槽
    1.App.vue <template><divclass="container"> <Categorytitle="游戏"><templatescope="atgui"><ul><liv-for="(g,index)inatgui.games":key="i......
  • 【剑指Offer】41、和为S的连续正数序列
    【剑指Offer】41、和为S的连续正数序列题目描述:小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100。但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数)。没多久,他就得到另一组连续正数和为100的序列:18,19,......
  • Spring Bean 生命周期
    实例化1、解析xml配置或注解配置的类,得到BeanDefinition;2、通过BeanDefinition反射创建Bean对象;属性赋值3、对Bean对象进行属性填充;初始化回调4、回调实现了Aware接口的方法,如BeanNameAware;5、调用BeanPostProcessor的初始化前方法;6、调用init初始化方法;7、调用BeanPostP......