Vue3的Fragment组件

2022-03-20 11:34:21 阅读：414 来源： 互联网

标签：vue Fragment 标签 App Vue3 组件 import sum

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3的Fragment组件