Question

我最近一直在学习Vue.js并努力理解component scope的概念。

根据我对文档示例的理解，子组件只能在父组件内部工作。

  <parent-component>
    <my-component></my-component>
  </parent-component>

但是，我无法达到这个结果。有人可以告诉我哪里出错了吗？

这里有my fiddle供你玩。

Answer 1

当您使用本地组件

时

var Parent = Vue.extend({
  template: '<div>This is a parent component</div>',
  components: {        
    'my-component': Child
  }
})

它已在本地注册。所以你不需要打电话

// register
Vue.component('my-component', Child);

如果您致电上述行，则表示您正在全局注册该组件。这使得它可以在组件外部访问。所以你的代码应该是

var Child = Vue.extend({
  template: '<div>This is a child component.</div>'
})

var Parent = Vue.extend({
  template: '<div>This is a parent component <my-component></my-component></div>',
  components: {
    // <my-component> will only be available in Parent's template
    'my-component': Child
  }
})

// register
//Vue.component('my-component', Child);
Vue.component('parent-component', Parent);
// create a root instance
new Vue({
  el: '#app'
})

我还注意到您将子组件嵌套在父模板之外。您必须使用本地组件（父组件范围内的子组件，该组件位于模板内而不是slot。

Vue.js中的组件范围

1 个答案: