Question

考虑一下：

AuthenticationException

所有三个“测试组件”均按预期方式呈现。参见https://jsfiddle.net/gotp1fdL/1/

但是，当我实现包装器App组件时，仅呈现第一个“测试组件”，而其他组件则被忽略... 参见https://jsfiddle.net/gsxq9ajc/

<div id="app">
  <test-component to="abc">Some ABC</test-component>
  <test-component to="xyz">Some XYZ</test-component>
  <test-component to="123">Some 123</test-component>
</div>

----

Vue.component('test-component', {
  template: '<a :href="to"> <slot></slot> </a>',
  props: ['to'],
});

new Vue({
  el: "#app",
})

请有人能解释为什么吗？将所有组件隔离呈现而没有问题的地方是什么？

Answer 1

问题如下，如控制台所示：

vue.js：634 [Vue警告]：编译模板时出错：

组件模板应仅包含一个根元素。如果你是   在多个元素上使用v-if，请改为使用v-else-if链接它们。

在应用程序组件中添加包装器将对其进行修复。

<template id="application">
  <div>
    <test-component to="abc">Some ABC</test-component>
    <test-component to="xyz">Some XYZ</test-component>
    <test-component to="123">Some 123</test-component>
  </div>
</template>

一个组件的多个实例被解析为一个

1 个答案: