Vue.js bug?

one root element

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]"></script>
<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>

CSS

h3 {
  color: red;
}

h4 {
  background-color: yellow;
}

a {
  background-color: skyblue;
}

code {
  background-color: silver;
}

JavaScript

const BaseComponent = {
    props: ['foo'],
    template: `
    <p>
      <h5 @click="emitHello">emit event (must be alert twice time)</h5>
      <code>props:{{JSON.stringify(this.$props)}}</code>
      <slot name="test"></slot>
      <div>ERROR!!!!</div>
      <slot></slot>
    </p>
    `,
    methods: {
    	emitHello () {
      	this.$emit('hello');
      }
    }
}

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