【Vue3系列-9】你知道Fragments和emits选项吗

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

这是本系列文章的第9篇关于Fragments和emits

往期相关文章可移步：

• 【Vue系列】Vue3新引入的composition API
• Vue3中composition API中ref和reactive函数的使用
• 【Vue系列-3】关于响应式深度监听和非深度监听
•  【Vue3系列-4】关于composition API中的toRaw和markRaw
• 【Vue3系列-5】你知道ref以及toRef和toRefs吗
• 【Vue3系列-6】你可能知道ref，但你知道怎么自定义一个ref吗
• 【Vue3系列-7】你知道Vue3中如何通过ref属性获取DOM元素吗
• 【Vue3系列-8】关于Vue3中传送门组件的使用

Vue3中组件可以拥有多根

我们知道，在vue2.x中，每个组件只能有一个根，这意味着我们写每个组件模板时都要套一个父元素。vue3为了更方便的书写组件模板，引入Fragments，说白了就是vue3中组件可以拥有多个根了

例如：创建一个Fragments.vue，组件模板可以写多个根

<template>
    <div>
        <h1>Fragments</h1>
    </div>
    <div>
        <p>vue3引入Fragments，本意是碎片</p>
        <p>说白了就是vue3的组件可以拥有多个根了</p>
    </div>
    <!--还可以拥有其他更多根-->
</template>

如上，由以前的单根变成多根的情况，是不是有点零零碎碎的感觉，这就是Fragmens意思的来源----碎片

vue3针对自定义事件，添加了emits选项

vue3新增emits选项，需要将组件发送的自定义事件定义在emits选项中。一来可以避免当自定义事件与原生事件重名时，事件会触发多次的情况，比如：click事件；二来可以更好的指示组件的工作方式

例如：创建一个Emits.vue，我们自定义了一个click事件

<template>
  <button @click="$emit('click')">点我</button>
</template>
<script>
export default {
    //emits:['click']
};
</script>

如果自定义事件没有写入到emits选项中，当自定义事件名与原生事件名冲突时，事件会被多次触发

<template>
  <Emits @click="onClick"></Emits>
</template>

<script>
import Emits from './components/Emits.vue'
export default {
  name: 'App',
  components: {
    Emits
  },
  methods:{
    onClick(){console.log('clicked!!!!!')}
  }
}
</script>

因此，在vue3书写自定义事件的时候，都建议将自定义事件书写到emits选项中