Vue3的Fragment组件

vue2时，组件的模板结构中出现多个标签时，需要使用根标签。
vue3时，组件的模板结构中出现多个标签时，可以不用根标签。这是因为vue3会自动将多个标签用Fragment组件包裹。

举个例子。

• main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

• App.vue

<template>
  <h2>当前和值为{{sum}}</h2>
  <h2>这台{{brand}}的售价是{{price}}</h2>
</template>

<script>
import { ref,reactive,toRefs} from 'vue';

export default {
  name:"App",
  setup(){
    let sum = ref(0);
    let car = reactive({
      brand:"BYD",
      price:"30W"
    })
    
    return {
      sum,
      ...toRefs(car)
    }
  }

}
</script>

• 启动应用，测试效果
  

标签：vue,Fragment,标签,App,Vue3,组件,import,sum
来源： https://blog.csdn.net/qzw752890913/article/details/123609645