Question

我有以下代码：

<my-messages>
    <message>Hello</message>
    <message>World</message>
</my-messages>

现在，我将<my-messages>组件重新命名为：

<div class="Messages">
    <!-- slot here -->
</div>

我喜欢为<message>做同样的事情，但问题是我收到错误Unknown custom element: <message>。除非我将代码更改为：

<my-messages inline-template>
    <message>Hello</message>
</my-messages>

似乎有点黑客，一旦我应该将[inline-template]声明为所有<my-messages>组件，而不是将其作为默认规则直接从此组件处理（例如，选项为{{ 1}}应该做的工作，如果存在的话。）

预期的渲染应该是：

inlineTemplate: true

我的组件目前：

<div class="Messages">
    <div class="message">Hello</div>
    <div class="message">World</div>
</div>

修改：在现实中，export default { components: { // Should process <message> sub-component. message: require('./Messages.Message.vue'), } }似乎混合了inline-template来自模板，而不是嵌套它。

Answer 1

inline-template不是黑客。我认为问题是您未在message组件使用my-messages组件的同一位置注册my-messages组件。

因此，作为孩子message的父组件无法理解inline-template，当您使用<message>范围更改时，您也需要在父级中注册它并且内部的任何内容都将被视为内在内容。您可以在docs

中找到它

修改

没有办法让<my-messages>只能作为mounted() { if (!this.$parent.$el.classList.contains('my-message')) { this.$destroy(); throw new Error('You must wrap the message in a my-message'); } }的孩子使用，但是如果它被滥用会引发异常

my-message

请注意，这假设类<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxml="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxml"> <xsl:output method="xml" indent="yes" omit-xml-declaration="yes"/> <xsl:key match="Row" name="rows" use="Surname"/> <xsl:template match="Record"> <Output> <xsl:for-each select="Row[generate-id(.) = generate-id(key('rows', Surname)[1])]"> <xsl:sort select="Surname" data-type="text" order="ascending"/> <xsl:variable name="Recordset" select="concat('Recordset',position())"/> <xsl:variable name="Rows"> <xsl:copy-of select="key('rows', Surname)"/> </xsl:variable> <xsl:variable name="RowList" select="msxml:node-set($Rows)"/> <xsl:for-each select="$RowList/Row[position() mod 2 = 1]"> <xsl:element name="{$Recordset}"> <Record> <xsl:copy-of select="./*"/> </Record> <xsl:if test="following-sibling::Row[1]/*"> <Record> <xsl:copy-of select="following-sibling::Row[1]/*"/> </Record> </xsl:if> </xsl:element> </xsl:for-each> </xsl:for-each> </Output> </xsl:template> </xsl:stylesheet>在根元素中可用，这样您就可以使用任何包装元素。

使用vue处理本地组件

1 个答案: