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

模板

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

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

为什么使用新的Vue.extend（）创建的子代不会在父代中呈现

1 个答案: