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>

  • 相关阅读:
    React父组件调用子组件
    ES6数组操作
    ant design mobile入坑记
    vue
    图片上传七牛
    CSS
    CSS矩形、三角形等
    使用POST下载文件
    http https协议
    前端网络必备知识
  • 原文地址:https://www.cnblogs.com/zhouyx/p/11854670.html
Copyright © 2011-2022 走看看