The contents of

---

template need to be wrapped in a unique label. You can OK span and button by wrapping them in a div

---

.

try to write it this way:

components: {
    'bottom': Bottom
}

< hr >

there is also a suggestion: don't name the component with such an intuitive name, it is recommended to name the component with more than two words

for example:

//template
<my-bottom></my-bottom>

//script
components: {
    'my-bottom': Bottom
}

---

The

error message has already explained to you why, in the vue component, all node elements can only be wrapped by one parent node.

If,else if judgment can be used to display one of the

when there are multiple ways.
so the correct way to write it is:

<template>
  <div>
    <span>demo</span>
    <button></button>
  </div>
</template>

There can be only one root node element in

---

template. If you need more than one root node, use the render function, jump door

.