• 大白话vue——slot的作用与使用 web


    这篇内容本来是不打算放在首页上的,因为内容实在是比较简单,但是在查找slot的使用讲解时发现相关的讲解比较少,要么像官方文档一样简单讲解(看过任然一脸懵逼),也许是自己理解能力比较差...所以在此讲述记录吧

    言归正传,且看正文讲解

    在看官网对slot的解释中,出现次数最多的是“插槽”,如果想象成物体,也就是说slot是一个可以插入的槽口,比如插座的插孔。那么slot的作用是什么呢?

    先来看下面的例子

    //slot组件
    <template> <div class="slots"> slot的用法 <SlotChild> <div class="no-name">我是嵌在子组件内不具有属性名的标签</div> </SlotChild> </div> </template> <script> import SlotChild from 'component/slotChild' export default { name: 'slots', components:{ SlotChild }, data () { return { } } } </script>
    //slot的子组件
    <template> <div class="slot-child"> 我是slot的子组件 </div> </template> <script> export default { name: 'slotChild', data () { return { } } } </script>

    页面渲染效果

    通过上面的内容可以知道,在slot组件中引入了slot的子组件,而且又在子组件标签内添加了新的标签内容,但页面上并没有将子组件标签内的标签内容显示出来,

    所以说在不适用slot的情况下,在子组件标签内添加Dom是无效的

    现在来修改slot的子组件

    <template>
      <div class="slot-child">
       //在子组件中添加slot标签 <slot></slot> 我是slot的子组件 </div> </template> <script> export default { name: 'slotChild', data () { return { } } } </script>

    页面效果图

    由此可见,使用slot后可以在子组件内显示插入的新标签

    这里只是讲述了slot的简单用法,slot的具名并没有讲到,并不难尝试着写写就可以,关键是要动手敲,光看是没法深刻理解的

  • 相关阅读:
    Docker容器启动时初始化Mysql数据库
    使用Buildpacks高效构建Docker镜像
    Mybatis 强大的结果集映射器resultMap
    Java 集合排序策略接口 Comparator
    Spring MVC 函数式编程进阶
    换一种方式编写 Spring MVC 接口
    【asp.net core 系列】6 实战之 一个项目的完整结构
    【asp.net core 系列】5 布局页和静态资源
    【asp.net core 系列】4. 更高更强的路由
    【Java Spring Cloud 实战之路】- 使用Nacos和网关中心的创建
  • 原文地址:https://www.cnblogs.com/weichen913/p/9297399.html
Copyright © 2020-2023  润新知