vue slot

Posted on Edited on In Views: Disqus:

 

一、匿名插槽

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .parent {
            border: 1px solid red;
            padding: 5px;
        }

        .child {
            border: 1px solid blue;
            padding: 5px;
        }
    </style>
</head>

<body>

    <div id="app">
        <app-parent>
            <app-child></app-child>
        </app-parent>
    </div>

    <script>
        Vue.component('app-parent', {
            template: `
        <div class="parent">
          <h1>父元件</h1>
          <slot></slot>
        </div>
      `
        });

        Vue.component('app-child', {
            template: `
        <div class="child">
          <h1>子元件</h1>
          <slot></slot>
        </div>
      `
        });

        let vm = new Vue({
            el: "#app",
            data: {
                message: 'Hello World!'
            }
        });
    </script>

</body>

</html>

呈現結構：

說明：

1、父元件有開一個 slot，用來插入 html 所代入的內容，

而子元件也有開一個 slot，用來插入上層所代入的內容。

 

2、由上範例中可知父元件有預留一個 slot，來讓子元件的 template 內容插進去，

而子元件也有預留一個 slot，其 slot 的內容則是放置 data 物件。

 

二、具名插槽

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .parent {
            border: 1px solid red;
            padding: 5px;
        }

        .child {
            border: 1px solid blue;
            padding: 5px;
        }
    </style>
</head>

<body>

    <div id="app">
        <app-parent>
            <app-child>
                <p slot="content">
                    
                </p>
            </app-child>
        </app-parent>
    </div>

    <script>
        Vue.component('app-parent', {
            template: `
        <div class="parent">
          <h1>父元件</h1>
          <slot></slot>
        </div>
      `
        });

        Vue.component('app-child', {
            template: `
        <div class="child">
          <h1>子元件</h1>
          <slot name="subject">信件標題</slot>
          <slot name="content">
              信件內容
          </slot>
          <slot name="footer">Best regards</slot>
        </div>
      `
        });

        let vm = new Vue({
            el: "#app",
            data: {
                message: 'Hello World!'
            }
        });
    </script>

</body>

</html>

說明：

由於子元件有開一個具名插槽，所以在 html 使用元件時，

可特別指明該插槽名稱，就可使用該子元件插槽。

 

參考資料：

Vue.js: Slot

[筆記] Vue 關於 slot-scope 的簡易認知

編譯作用域與 Slot 插槽