如何在 HTML 中的模板組件內使用插槽

Question

我正在嘗試使用 Vue 組件內的插槽來更輕松地顯示不同的標題。 但是，當我嘗試用數據替換插槽時，無論標記中的相對定位如何，插槽僅使用它的回退選項。

我的理解是要使用的模板首先使用標簽，然后放入插槽並賦予“名稱”，在開始和結束插槽標簽之間使用后備文本，如下所示：

<template id="somename-template>
     <slot name="attrname>Some Fallback</slot>
</template>

然后數據存儲如下：

<somename>
     <span slot="attrname">Real text</slot>
</somename>

我嘗試重新定位腳本的上方和下方以及的上方和下方，但是沒有任何組合提供預期的結果。

我的實際代碼：

<body>
    <template id="comp-dem-template">
        <header-component></header-component>
    </template>

    <script>
        customElements.define('comp-dem',

            class extends HTMLElement {

            constructor() {

                super();

                const template = document.getElementById('comp-dem-template').content;

                const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));

            }

        });
        Vue.component('header-component', {
            template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>'
        })
        new Vue({ el: '#comp-dem-template' })
    </script>
    <comp-dem>
        <span slot="pagetitle">
            Images
        </span>
    </comp-dem>
</body>

標記應如下所示：

<h1>Images</h1>

但是，看起來像：

<h1>Page Title Fallback</h1>

我可以說我做錯了可能是一件非常簡單的事情（或者它是錯誤的工作工具），但即使查看其他工作示例，我也無法確定那究竟是什么。

Answer 1

我不太清楚你想要完成什么。 您將<span slot="pagetitle">Images</span>傳遞給<comp-dem>但<comp-dem>組件沒有插槽 - <header-component>有一個插槽. 為什么需要將組件包裹在組件中？

為了使代碼正常工作，需要像這樣傳遞插槽：

    <body>
        <template id="comp-dem-template">
            <header-component>
                <span slot="pagetitle">
                    Images
                </span>
            </header-component>
        </template>

        <script>
            Vue.component('header-component', {
                template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>'
            })
            new Vue({ el: '#comp-dem-template' })
        </script>
    </body>

或者，如果您堅持使用<comp-dem> ，我認為您可能需要執行以下操作：

    <body>
        <template id="comp-dem-template">
            <header-component>
                <span slot="pagetitle">
                    <slot name="pagetitle"><slot>
                </span>
            </header-component>
        </template>

        <script>
            customElements.define('comp-dem',

                class extends HTMLElement {

                constructor() {

                    super();

                    const template = document.getElementById('comp-dem-template').content;

                    const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));

                }

            });
            Vue.component('header-component', {
                template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>'
            })
            new Vue({ el: '#comp-dem-template' })
        </script>
        <comp-dem>
            <span slot="pagetitle">
                Images
            </span>
        </comp-dem>
    </body>

如何在 HTML 中的模板組件內使用插槽

問題描述

1 個解決方案

解決方案1
1 已采納 2019-08-16 04:01:24

如何在 HTML 中的模板組件內使用插槽

問題描述

1 個解決方案

解決方案1 1 已采納 2019-08-16 04:01:24

解決方案1
1 已采納 2019-08-16 04:01:24