Vue.component("child-one", {
  template: "<div>child-one</div>"
});

Vue.component("child-two", {
  template: "<div>child-two</div>"
});

var app = new Vue({
  el: "#app",
  data: {
    type: "child-one",
    type1: "child-three"
  },
  // 中间没有内容的话可以写单标签就行
  // 也可把v-once写在外层
  template: `
        <div>
          <child-one v-if="type == 'child-one'"/>
          <child-two v-if="type == 'child-two'"/>
          <button @click="handleBtnClick">切换</button>
        </div>
      `,
  methods: {
    handleBtnClick: function () {
      this.type =
        this.type == "child-one"
          ? (this.type = "child-two")
          : (this.type = "child-one");
      console.log(this.type);
    }
  }
});