zoukankan      html  css  js  c++  java
  • slot 的简单用法

    注:默认在父组件调用子组件时<SlotChild></SlotChild>中文字不会显示。但是在子组件加入<slot></slot>后,<SlotChild></SlotChild>中文字会显示了。

    //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
    },
    }
    </script>

    子组件

    <template>
    <div class="slot-child">
       //在子组件中添加slot标签
    <slot></slot>
    我是slot的子组件
    </div>
    </template>

    <script>
    export default {
    name: 'slotChild',
    data () {
    return {

    }
    }
    }
    </script>

  • 相关阅读:
    洛谷 P6622
    洛谷 P6619
    LOJ 3188
    CF::Gym 102174G
    eJOI2017~2019
    洛谷 P6313
    洛谷 P6305
    JSOI2020 酱油记
    洛谷 P6234
    CodeForces 1334F
  • 原文地址:https://www.cnblogs.com/zhouyx/p/11854670.html
Copyright © 2011-2022 走看看