Question

我正在尝试从一个locally defined vue2组件设置引用，如下所示：

new Vue({
  el: '#app',
  components: {
    'foo': {template: '<p>Foo</p>'},
    'bar': {template: '<foo />'}
  }
});

尝试渲染<foo>（see this jsfiddle）时，Vue（Vue 2.2.1）会发出警告：

[Vue警告]：未知的自定义元素： - 你注册了吗？组件正确吗？对于递归组件，请务必提供 “名称”选项。

我已尝试在组件name中添加foo选项，如警告和指南中recursive components部分所示，但这没有区别。

如果我在全球注册组件（jsfiddle）：

，一切正常

Vue.component('foo', {template: '<p>Foo</p>'});
Vue.component('bar', {template: '<foo />'});

new Vue({
  el: '#app'
});

是否有一种简单的方法可以使本地定义起作用，还是应该继续使用全局定义的组件？

Answer 1

bar不了解foo。您已经定义了一些内容，以便您的主Vue实例知道它们两者，但它并没有使用foo，bar。您需要将foo定义为bar的组件：

＆＃13;

new Vue({
  el: '#app',
  components: {
    'bar': {
      template: '<foo></foo>',
      components: {
        'foo': {
          template: '<p>Foo</p>'
        }
      }
    }
  }
});

＆＃13;

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <bar></bar>
</div>


Vue no longer emits this warning when trying to instantiate "bar":
<code><pre>
[Vue warn]: Unknown custom element: &lt;foo&gt; - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
</pre></code>

＆＃13;

从另一个引用一个本地定义的vue2组件

1 个答案: