为什么使用 new Vue.extend() 创建的子级不会在父级中呈现

【问题标题】：Why child created with new Vue.extend() does not get rendered in parent为什么使用 new Vue.extend() 创建的子级不会在父级中呈现
【发布时间】：2019-05-02 12:51:00
【问题描述】：

为什么即使组件是使用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
  }
})

模板

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

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

extend 方法是 to extend an already existing component。在这种情况下，您想要的是创建一个新组件。您可以使用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
  }
})

【讨论】：