首页 > 代码库 > Vuejs-组件-<slot> 标签分发内容

Vuejs-组件-<slot> 标签分发内容

资料来自:https://cn.vuejs.org/v2/guide/components.html#具名-Slot

在官方文档的基础上,更加细致的讲解代码。

 

<slot> 标签中的任何内容都被视为备用内容,只有在宿主元素为空,它才显示。

1.单个slot

 除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将丢弃。

<body >
    <div id="app">
        <h1>我是父组件的标题</h1>
        <my-component>
          <p>这是一些初始内容</p>
          <p>这是更多的初始内容</p>
        </my-component>
    </div>
        <script src="js/vue.min.js"></script>
        <script>
            new Vue({
              el:#app,
              components:{
                myComponent:{
                  template:<div><h2>我是子组件的标题</h2><slot>只有在没有要分发的内容时才会显示。</slot></div>,
            }
          }
        })
        </script>
</body>

2.具名slot

 slot 可以有不同的名字。具名 slot 将匹配内容片段中所对应 slot 特性。

 将对应的父组件嵌套到 具名 slot 的子组件 位置 的元素展示出来。

      <app-layout>
        <h1 slot="header">这里可能是一个页面标题</h1>
        <p>主要内容的一个段落。</p>
        <p>另一个主要段落。</p>
        <p slot="footer">这里有一些联系信息</p>
      </app-layout>
        <script src="js/vue.min.js"></script>
        <script>
        new Vue({
          el:#container,
          components:{
            appLayout:{
              template:<div class="container">
                <header>
<slot name="header"></slot></header>
                <main><slot></slot></main>
                <footer><slot name="footer"></slot></footer>
              </div>‘,
            }
          }
        })

 

Vuejs-组件-<slot> 标签分发内容