javascript - Vue.js のコンポーネント スコープ

Question

私は最近 Vue.js を学んでいて、component スコープの概念を理解するのに苦労しています。

ドキュメントの例から私が理解したことから、子コンポーネントは親コンポーネント内でのみ機能します。

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

しかし、私はこの結果を達成することができません。誰かが私が間違っているところを教えてもらえますか?

これが私のフィドルです。

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'
})

また、親テンプレートの外側に子コンポーネントをネストしていることにも気付きました。ローカル コンポーネント (スロットではなくテンプレート内にある親コンポーネントのスコープ内の子コンポーネント) を使用する必要があります。