zoukankan      html  css  js  c++  java
  • vue组件-使用插槽分发内容(slot)

    slot--使用插槽分发内容(位置、槽口;作用: 占个位置)

    官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容

    使用组件时,有时子组件不知道会收到什么内容,这是由父组件决定的。

    一、单个插槽

    1.my-component 组件:
    <div>
        <h2>我是子组件的标题</h2>
        <slot>
            只有在没有要分发的内容时才会显示。
        </slot>
    </div>
    
    2.父组件:
    <div>
        <h1>我是父组件的标题</h1>
        <my-component>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </my-component>
    </div>
    
    3.渲染结果:
    <div>
        <h1>我是父组件的标题</h1>
        <div>
            <h2>我是子组件的标题</h2>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </div>
    </div>

    二、具名插槽

    slot根据不同的name名称分发内容,多个插槽可以有不同的名字。

    仍然可以有匿名的默认插槽,为了找不到匹配的内容片段使用,如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。

    1.my-component 组件:
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
    
    2.父组件:
    
    <my-component>
        <h1 slot="header">这里可能是一个页面标题</h1>
        <p>主要内容的一个段落。</p>
        <p>另一个主要段落。</p>
        <p slot="footer">这里有一些联系信息</p>
    </my-component>
    
    3.渲染结果:
    <div class="container">
        <header>
            <h1>这里可能是一个页面标题</h1>
        </header>
        <main>
            <p>主要内容的一个段落。</p>
            <p>另一个主要段落。</p>
        </main>
        <footer>
            <p>这里有一些联系信息</p>
        </footer>
    </div>

    三、作用域插槽

    作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。

    1.子组件:
    <div class="child">
        <slot text="hello from child"></slot>
    </div>
    
    2.父组件:
    
    <div class="parent">
        <child>
            <template slot-scope="props">
                <span>hello from parent</span>
                <span>{{ props.text }}</span>
            </template>
        </child>
    </div>
    
    3.渲染结果:
    <div class="parent">
        <div class="child">
            <span>hello from parent</span>
            <span>hello from child</span>
        </div>
    </div>
  • 相关阅读:
    Mysql如何修改unique key
    centos 编译 安装 protobuf
    EasyNetQ简单使用
    微信发送模板消息
    Python删除开头空格
    代码积累-Common
    sql With(NoLock),With(ReadPast)
    webform 使用log4net配置
    log4net.dll添加报错
    js-小数计算问题
  • 原文地址:https://www.cnblogs.com/ccyinghua/p/7878187.html
Copyright © 2011-2022 走看看