【Vue3系列-9】你知道Fragments和emits选项吗
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选项中
作者：Andy_W
链接：https://juejin.cn/post/7023949906872107021