Vue.js 中的组件范围

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 中的组件范围

Component scope in Vue.js

javascript

vue.js

vue-resource