zoukankan      html  css  js  c++  java
  • Vue插槽

    插槽内容

    Vue实现一套内容分发的API, 这套API基于当前的web组件规范草案,将元素作为承载分发内容的出口。

    <navigation-link url="/profile">
        Your Profile
    </navigation-link>
    

    然后在的模板中可能会写为:

    <a :href="url" class="nav-link">
        <slot></slot>
    </a>
    

    当组件渲染的时候,这个元素将会被"Yourt Profile"替换。插槽可以包括任何模板代码,包括HTML:

    <navigation-link url="/profile">
        <span class="fa fa-user"></span>
        Your Profile
    </navigation-link>
    

    甚至其他的组件:

    <navigation-link url="/profile">
        <font-awesome-icon name="user"></font-awesome-icon>
        Your Profile
    </navigation-link>
    

    如果没有包含一个元素,则任何传入它的内容都会被抛弃。

    具名插槽

    有些时候我们需要多个插槽,例如:

    <div>
        <header>我们希望把页头放这里</header>
        <main>我们希望把主要内容放这里</main>
        <footer>我们希望把页脚放这里</footer>
    </div>
    

    对于这种情况,元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:

    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
    

    在向具名插槽提供内容的时候,我们可以在一个父组件的