Почему дочерний элемент, созданный с помощью новой функции Vue.extend (), не отображается в parent

Question

Почему дочерний элемент не отображается в родительском элементе, даже если компонент создан с помощью конструктора компонента, возвращенного с Vue.extend()

var newChild = Vue.extend({
  template: '<div> {{ childMsg }} </div>',
  data() {
    return {
      childMsg: 'Child World'
    }
  }
})

var child = new newChild()

new Vue({
  el: '#app',
  data: {
    msg: 'Hello World'
  },
  components: {
      child: child
  }
})

template

<div id="app">
  <div>{{msg}}</div>
  <child></child>
</div>

Answer 1

Метод extend - это для расширения уже существующего компонента . В этом случае вам нужно создать новый компонент. Это можно сделать с помощью метода component, а первый аргумент, предшествующий свойствам компонента, - это имя компонента.

Зная это, вы можете адаптировать код следующим образом:

var newChild = Vue.component('child', {
  template: '<div> {{ childMsg }} </div>',
  data() {
    return {
      childMsg: 'Child World'
    }
  }
})

new Vue({
  el: '#app',
  data: {
    msg: 'Hello World'
  },
  components: {
      child: newChild
  }
})