Vue.js bug?

one root element

by ChangJoo Park

HTML

<div id="demo">
  <h3>baseComponent</h3>
  <base-component foo="bar" @hello="hello" @click.native="native">
    default-slot
    <h4 slot="test">test-slot</h4>
  </base-component>
</div>

<template id="base-component">
  <div>
    <h5>emit event (must be alert twice time)</h5>
    <code>props:{{JSON.stringify(this.$props)}}</code>
    <slot name="test"></slot>
    <div>ERROR!!!!</div>
     <slot></slot>
  </div>
</template>

CSS

h3 {
  color: red;
}

h4 {
  background-color: yellow;
}

a {
  background-color: skyblue;
}

code {
  background-color: silver;
}

JavaScript

const BaseComponent = {
  props: ['foo'],
  template: '#base-component',
  methods: {
    emitHello() {
      this.$emit('hello');
    }
  }
}

new Vue({
  el: '#demo',
  methods: {
    hello() {
        alert('Hello!!');
      },
      native() {
        alert('Native!!');
      }
  },
  components: {
    BaseComponent,
  },
});