通过 Vue.extend 或通过 "new Vue()" 创建组件时的不同行为：如果通过新的 Vue 创建，则无法访问视图模型的数据和方法

Question

>我有一个简单的组件 你好：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  props: {'myprop': String},
  data () {
    return {
      msg: 'Welcome ' + this.myprop
    }
  },
  methods: {
    mymethod: function () {
      return 'hi there'
    }
  }
}
</script>

现在，根据组件的创建方式，可以访问方法和数据。 最简单的说明方法是通过测试，请阅读测试中的注释：

import Vue from 'vue'
import Hello from '@/components/Hello'
describe('Hello.vue', () => {
  it('with Vue Extend', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor({ propsData: { myprop: 'from test via propsdata' } }).$mount()
    // following 3 expections will all SUCCEED
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome from test via propsdata')
    expect(vm.myprop).to.equal('from test via propsdata')
    expect(vm.mymethod()).to.equal('hi there')
  })
  it('with new Vue', () => {
    const vm = new Vue(
      {
        template: "<div><hello myprop='from template in test'></hello></div>",
        components: { 'hello': Hello }
      }).$mount()
    // following expectation SUCCEDS
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome from template in test')
    // following TWO expections will FAIL
    expect(vm.mymethod()).to.equal('hi there')
    expect(vm.myprop).to.equal('from template in test')
  })
})

我怎样才能让最后 2 个期望发挥作用？

谢谢。

Answer 1

您必须先注册自定义组件。有两种方法可以执行此操作：

• 使用全局注册：

    // register
    Vue.component('hello', {
        template: "<div><hello myprop='from template in test'></hello></div>",
        // ...
    });
    // create your root instance
    const vm = new Vue({
        el: '#root' // assume root eventually renders the 'hello' component
    });
  

  Vue.js 文档指出：

  注册后，组件可以在实例的模板中用作自定义元素 [...]在实例化根 Vue 实例之前，请确保组件已注册。

• 通过本地注册：

    // declare
    var hello = {
        template: "<div><hello myprop='from template in test'></hello></div>",
        // ...
    };
    // create your root instance, registering everything in 'components'
    const vm = new Vue({
        components: { 'hello': Hello }
    });
  

对于您的情况，前者似乎更合适，因为您希望保持 SOC 完好无损，并且只测试组件的功能。

Answer 2

好的，我找到了解决方案。要确定最后 2 个期望：

expect(vm.$children[0].mymethod()).to.equal('hi there')
expect(vm.$children[0].myprop).to.equal('from template in test')

回想起来，很明显，因为我们在div 中添加了组件。