相关疑难解决方法(0)

我正在开发一个 Vue 服务器端模板引擎，该包的一部分包括一个头管理系统。

我正在为 Vue 开发一个服务器端渲染器，为了让 SSR 的主管管理工作，它需要一种将VNodes 渲染为文本的方法。

我的问题： 如何将 VNode 渲染为字符串？例如：

this.$ssrContext.head = renderVNodesToString(this.$slots.head)

示例用例：

master.vue

<template>
    <div id="app">
        <slot name="content"></slot>
    </div>
</template>
<script>
export default {
    created: function(){
        if(this.$isServer){
            var VNodesToRender = this.$slots.head
            this.$ssrContext.head = 'rendered VNode here'
        }
    }
}
</script>

home.vue

<template>
    <master>
        <template slot="content">
            Hello World
        </template>
        <template slot="head">
            <script src="https://unpkg.com/vue/dist/vue.js"></script>
            <title>Hello</title>
        </template>
    </master>
</template>
<script>
import master from "layouts/master.vue"

export default {
    components: {
        master
    }
}
</script>

我的目标是将home.vue的 …

我在弄清楚如何使以下各项工作方面遇到困难：

我的父母模板

<comp>
  <a href="#" slot="links>link 1</a>
  <a href="#" slot="links>link 2</a>
</comp>

我的组件comp模板如下所示：

<ul class="comp">
  <li class="comp-item"><slot name="links"></slot></li>
</ul>

目前，我所有的定位li标记都转到了单个标记（这是预期的），但是我希望能够为li插入的每个命名插槽生成多个标记，如下所示：

<ul class="comp">
  <li class="comp-item"><a href="#" slot="links>link 1</a></li>
  <li class="comp-item"><a href="#" slot="links>link 2</a></li>
</ul>

有什么方法可以在不使用作用域插槽的情况下实现我所需要的？因为我的内容是纯HTML，所以我觉得没有必要将静态内容放入prop中以进行呈现。

从我所看到的情况来看，大多数vue UI框架都要求您为列表项使用另一个自定义组件，我觉得这个问题已被淘汰。还有其他方法吗？