zoukankan      html  css  js  c++  java
  • 大白话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的具名并没有讲到,并不难尝试着写写就可以,关键是要动手敲,光看是没法深刻理解的

  • 相关阅读:
    搞不明白,乱七八糟一团浆糊
    不能让外界打乱你的生活节奏
    被人的认知刷新了
    C#识别图片上的数字
    C# @字符用法
    SQL语句优化(转摘)
    C# 根据年月获得此月第一天和最后一天,并计算工作日
    jQuery渐隐渐出的文字提示
    JQuery 拖动层
    Windows SQL Server 2012 R2 安装Intel I217-V/I218-V网卡驱动(转)
  • 原文地址:https://www.cnblogs.com/weichen913/p/9297399.html
Copyright © 2011-2022 走看看