Vuejs2 在Vue中设置包装器对象的子组件的道具

我正在使用vue test util为我制作的组件编写一些测试。我已将代码归结为实际问题

该组件的形式如下：

导出默认值{ 名称：“MyList” } 我的内部组件看起来像这样：

一些东西 导出默认值{ 名称：“内部组件”， 道具：{ 开：错， } } 现在，我正在编写的测试是，当open prop设置为true时，测试内部组件中是否存在div，但默认情况下它设置为false。我需要一种方法来设置这个子组件的道具，然后再测试它

我的测试：

从'@vue/test-utils'导入{createLocalVue，mount} 从“@/components/MyList.vue”导入MyList 描述“我的测试”，=>{ const localVue=createLocalVue const wrapper=mountMyList 它'测试'，=>{ //需要在这里设置道具 expectwrapper.find'div'.exists.toBeTruthy } } 我可以使用：

wrapper.vm.$children[0]。$options.propsData.open=true 这似乎设置了道具，但我的测试仍然显示为接收错误

我可以更改组件，使默认值为true，然后我的测试通过，这样我就不会认为这是我检查的方式

如果有人能发现这不起作用的原因或者知道更好的方法，请让我知道

使用vue test util，您可以使用包装器中的方法setProps，检查相关文档

比如说

const wrapper = mount(Foo)
wrapper.setProps({ foo: 'bar' })

使用vue test util，您可以使用包装器中的方法setProps，检查相关文档

比如说

const wrapper = mount(Foo)
wrapper.setProps({ foo: 'bar' })

根据报告：

vm.$选项

用于当前Vue实例的实例化选项

所以，$options不是我们在道具中写的东西

使用$props设置子组件的属性：

wrapper.vm.$children[0].$props.open = true

    wrapper.setData({isOpen:true})

但这种方式导致了警告：

避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性

因此，让我们按照建议将子组件的属性与父组件的数据绑定。这里我用isOpen变量绑定它：

<template>
  <inner-component :open='isOpen'></inner-component>
</template>

<script>
import InnerComponent from '@/components/InnerComponent.vue'

export default {
  name: 'MyList',
  data() {
    return {
      isOpen: false
    }
  },
  components:{InnerComponent}
}
</script>

根据报告：

vm.$选项

用于当前Vue实例的实例化选项

所以，$options不是我们在道具中写的东西

使用$props设置子组件的属性：

wrapper.vm.$children[0].$props.open = true

    wrapper.setData({isOpen:true})

但这种方式导致了警告：

避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性

因此，让我们按照建议将子组件的属性与父组件的数据绑定。这里我用isOpen变量绑定它：

<template>
  <inner-component :open='isOpen'></inner-component>
</template>

<script>
import InnerComponent from '@/components/InnerComponent.vue'

export default {
  name: 'MyList',
  data() {
    return {
      isOpen: false
    }
  },
  components:{InnerComponent}
}
</script>

---

如果假设MyList组件而不是Foo，则将为父组件设置属性，但不会为子组件设置属性。如果假设MyList组件而不是Foo，则将为父组件设置属性，但不会为子组件设置属性。是否确定在InnerComponent中描述属性的方式？他们说作为对象的道具包含属性名称及其类型，但不包含默认值。您确定在InnerComponent中描述属性的方式吗？他们说道具作为一个对象包含属性名及其类型，但不包含默认值。感谢拉娜，这一切都成功了！它抱怨我应该避免直接修改道具，因为值会被覆盖，但在这一点上我不在乎aha@Fergmux，我编辑了答案，并解释了如何避免警告Hanks Lana这起作用了！它抱怨我应该避免直接修改道具，因为值会被覆盖，但在这一点上我不在乎aha@Fergmux，我编辑了答案并解释了如何避免警告