时间戳

首页 > 解决方案 > Vue 3 模板根只需要一个元素

javascript - Vue 3 模板根只需要一个元素

问题描述

在 Greet.vue 中

<template>
  <h2> Hello {{ name }} </h2>
</template>

<script>
export default {
    name: "Greet",
    props:['name']

};
</script>

在 App.vue 中

<template>
  <Greet name="bruce"/>
  <Greet name="leo" />
  <Greet name="diana" />
  
</template>

<script>

import Greet from './components/Greet.vue'

export default {
  name: 'App',
  components: {
    Greet,
  }
}
</script>

首先我遇到了这个问题。然后我跟着它。

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

现在没有错误。Hello 但是现在浏览器中只显示了一个。我应该期待3。

标签： javascriptvue.jsvuejs3

解决方案

应用程序.vue

<template>
  <div>
    <Greet name="bruce"/>
    <Greet name="leo" />
    <Greet name="diana" />
  <div>
</template>

<script>

import Greet from './components/Greet.vue'

export default {
  name: 'App',
  components: {
    Greet,
  }
}
</script>

以上将解决模板根需要一个元素，而这些vetur配置只禁用一些代码检查。

"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

推荐阅读