Fragments and Emits

This paper mainly includes two parts:

  1. Pieces of Fragments could –
  2. emits Custom events

(a) Fragments could

Fragments, one of vuE3’s new features, allow a VUE component to have multiple root nodes. Create one of the following components, out of the box in VUe3

<template>
	<header>.</header>
	<main v-bind="$attrs">.</main>
	<footer>.</footer>
</template>
Copy the code

Compared with vue3, vue2 specifies that a vue component can be created with only one root node. The following error occurs when a vue component is created in vue2:

Errors compiling template:
Component template should contain exactly one root element.
Copy the code

The reason is that a VUE instance representing any component needs to be bound to a single DOM element. The only way to create a component with multiple DOM nodes is to create a functional component with no underlying Vue instance.

Fragments can currently be used in VUe2 using the Vue-Fragments library.

Fragments are used like a normal DOM element, but they are virtual and do not appear in the DOM tree at all. This allows us to bind component functionality to a single element without creating an extra DOM node.

(2) Emits Component Option

Custom events sent by components in Vue3 need to be defined in the emits option:

  • If the custom event name conflicts with the native event, such as ‘click’, there will be a pit that fires two events if it is not set in the emits option
  • Better indication of how components work
<template> < button@click ="$emit('click')"> custom event </button> </template> <script> import {defineComponent} from "vue"; Export default defineComponent({emits: ['click'] // this conflicts with the native event name, if not set, click will trigger two, one custom event, one native event}) </script>Copy the code

Note: Try to avoid conflicts between custom event names and native event names

  • Parameters have two forms object and array, the object can be configured with a checksum function event, null indicates no checksum, the checksum function will receive passed to$emitThe other parameters of the call, such as’ $emit(‘event’, 1), are called. The verification function corresponding to the event event receives parameter 1 and returns a Boolean value indicating whether the event parameter is valid
// search-bTN <template> <a-button @click="onReset"> reset </a-button> <a-button type="primary" @click="onSearch" > search </a-button> </template> <script lang="ts"> import { defineComponent } from 'vue'; Export default defineComponent({name: 'search-btn', emits: {// No validation function reset: null, // with validation function search: Playload => {// playload => {if (playload) {return true; } else {// check does not pass return false; } } }, setup(props, { emit }) { const onReset = () => { emit('reset'); }; const onSearch = () => { emit('search'); }; return { onSearch }; }}); </script>Copy the code
// parent component index.vue <search-btn @reset="onReset" @search="onSearch" /> // js core code const onSearch = () => { Console. log(' Execute external events ')}Copy the code

Note: If the validation fails, the console prints a warning, but the emits event continues.

There is a pit here. At first, I thought it was the method of intercepting if the verification fails, and not executing the external component. However, after testing, I found that the verification function would continue to execute, but only output a warning

thinking

Q1: Why don’t VUe2 introduce Fragments?

According to Vue contributors, VUe2 restricts components to having only one root node, mainly because the virtual DOM Diff algorithm relies on components with a single root, and allowing Fragments would require major changes to the algorithm, not only to make it work, but to make it high-performance, which is a very difficult task.

Github.com/vuejs/vue/i…

Underline, vue2 is not introduced mainly because of the diff algorithm,

Question 2: Does the diff algorithm change when vuE3 introduces Fragments? Has the rendering mechanism changed?

TODO: Diff algorithm understanding