[Vuejs]-Can the built-in "Component" component be used in a render function?

by

0👍

✅

Actually, the ease of <transition> use is not predicated on the use of <component>. If you want to set up a transition between components in a render function, you just need to change the element that you return under the transition. See the example below.

I have a feeling that I was overthinking what the <component> actually is. The Vue API likely considers everything defined through Vue.component() or Vue({components: {}) "components". Considering that, there is no reason to outright use <component> within a render function.

const app = new Vue({
  el: "#app",
  data() {
    return {
      cmp: "foo"
    }
  },
  created() {
    setInterval(() => this.cmp = (this.cmp === "foo" ? "bar" : "foo"), 2000);
  },
  components: {
    foo: {
      template: "<div>foo</div>"
    },
    bar: {
      template: "<div>bar</div>"
    }
  },
  render(h) {
    return h("div", [
      h("transition", {
        props: {
          appear: true,
          name: "fade",
          mode: "out-in"
        }
      }, [h(this.cmp)])
    ]);
  }
});
.fade-enter-active,
.fade-leave-active {
  transition: opacity 500ms ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

Leave a comment