Question

是否可以在渲染函数中使用<component>组件？我在尝试使用它时遇到以下错误：

未知的自定义元素：-您是否注册了该组件正确吗？对于递归组件，请确保提供“名称” 选项。

<component>和<transition>都被列为Built-In Components，并且我已经在渲染函数中成功使用了<transition>，但是在使用{{1 }}。

我想使用<component>组件，因为它允许您使用<component>元素so painlessly。

这有效：

<transition>

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>"
    }
  }
});

这不是

：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <component :is="cmp"></component>
</div>

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("component", {
        props: {
          is: this.cmp
        }
      })
    ]);
  }
});

Answer 1

实际上，<transition>的易用性并不取决于<component>的使用。如果要在渲染函数中设置transition between components，则只需更改在过渡下返回的元素。请参见下面的示例。

我感觉自己在思考<component>的实际含义。 Vue API可能会考虑通过Vue.component()或Vue({components: {})“组件”定义的所有内容。考虑到这一点，没有理由在渲染函数中完全使用<component>。

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>

可以在渲染功能中使用内置的“ Component”组件吗？

1 个答案: