Javascript Vue.js插槽-如何在计算属性中检索插槽内容

我有一个问题。一方面，我需要显示插槽代码。另一方面，我需要在文本区域中使用它来将其发送到外部源

main.vue

#自定义css{
宽度：300px
高度：200px；
}

aaa
bbb
ccc

我的代码.vue

{{theHTML}}
{{theCSS}}
导出默认值{
名称：“myCode”，
道具：{
代码ID:String，
},
计算：{
theHTML（）{
返回此项。$slots['html-code']；/*问题在这里，它返回vNodes*/
},
theCSS（）{
返回此项。$slots['css-code'][0]。文本；
},
}
}

问题是vue没有打开插槽内容。它是一个

元素数组。是否有办法使用

文本区域内的插槽

。或者在

theHTML（）

computed属性中检索插槽内容的方法

---

注意：我在vuePress中使用此组件。

您需要创建一个自定义组件或自定义函数来直接将VNode呈现为html。我认为这将是最简单的解决办法

vnode到html.vue

导出默认值{
道具：[“vnode”]，
渲染（createElement）{
返回createElement（“模板”，[this.vnode]）；
},
安装的（）{
这是$emit(
“html”，
[…this.$el.childNodes].map（（n）=>n.outerHTML.join（“\n”）
);
},
};

然后您可以将其用于您的组件

模板>
将Vnode从“/Vnode导入html”；
导出默认值{
名称：“myCode”，
组成部分：{
Vnode，
},
道具：{
代码ID:String，
},
数据（）{
返回{
html:，//添加此属性以获取普通html
};
},
计算：{
theHTML（）{
把这个还给我。$slots[
“html代码”
]
},
theCSS（）{
返回此。$slots[“css代码”][0]。文本；
},
},
};

---

这个帖子可能会有帮助

你真是太棒了！！！现在我明白了逻辑。感谢您花时间编写答案和长代码。