HTML 如何在模板组件内部使用插槽

Question

我正在尝试使用 Vue 组件内的插槽来更轻松地显示不同的标题。但是，当我尝试用数据替换插槽时，无论标记中的相对定位如何，插槽仅使用它的后备选项。

据我了解，首先要使用的模板带有标签，然后放入槽，并在开始和结束槽标记之间给出 "name," 和回退文本，如下所示：

<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 如何在模板组件内部使用插槽

How to use slots inside of template components in HTML

html

templates

slot

vue.js