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 个答案: