2021-07-05 解决:使用vue定义多个单标签组件时,只显示第一个组件

发现问题

设置两个组件.不能全部显示

出现原因

用单标签的时候，只会显示第一个组件
改成双标签后，就会显示两个组件了。

代码

html

<div id="app">
    <!-- 多标签 -->
    <!-- <my_component1></my_component1>
        <my_component2></my_component2> -->
    <!-- 单标签 -->
    <my_component1/>
    <my_component2/>
</div>
<!--目的是将box1和box2渲染为app子标签-->
<template id="comp1"><div class="box1">{{msg}}</div></template>
<template id="box2"><div class="box2">{{msg}}</div></template>

js

new Vue({
    el: "#app",
    components: {
        "my_component1": {
            data() {return {msg: "我是组件1"}},
            template: "#comp1"
        },
        "my_component2": {
            data() {return {msg: "我是组件2"}},
            template: "#comp2"
        }
    }
});

结果

只有box1渲染成功