Design patterns 在容器上声明父模型

有没有办法让这一切顺利进行

Javascript:

const vm = new Vue({
  el: "#app",
  data: {
    invoice: {
      title: "test"
    }
  }
})

帕格：

我想实现的是说“整个容器绑定到数据中的这个对象，它的每个子对象都应该尝试在该对象中而不是在根中找到想要的数据

假设我在homeAddress对象中有很多属性，那么我就不想写了

.container
  span {{ homeAddress.municipality }}    
  span {{ homeAddress.streetNumber }}

但只是

.container(v-model="homeAddress")    
  span {{ municipality }}
  span {{ streetNumber }}

---

编辑：我知道我可以通过为容器声明一个组件来做到这一点，但这感觉有些过头了。

简单的回答是，Vue没有完全直接的功能可以为您提供与JavaScript相当的范围重置功能

要获得一个新的作用域，您需要一个组件。要使您在组件中传递的所有键成为顶级数据项，您需要做一个小技巧：让

data

函数返回prop

的魔力允许您重用组件，并将HTML与您决定传入的任何数据相匹配

const vm=new Vue({
el:“应用程序”，
数据：{
发票：{
标题：“测试”
},
家庭地址：{
市政当局：“这里”，
街道号码：“num”
},
还有一件事：{
第一:"一",，
第二,"两",，
第三：“三”
}
},
组成部分：{
新闻范围：{
道具：['scope']，
数据（）{
返回此.scope；
}
}
}
})；

//这很有效
{{invoice.title}
{{市政府}
{{streetNumber}}

{{first}}
{{second}}
{{third}}

谢谢！这是一种好的做法还是不好的做法？是否建议改为使用homeAddress.streetNumber？我认为只要您不修改组件中的值就可以了（例如，使用

输入
和
v-model
）。修改值会起作用，但组件修改父数据不是一个好的做法。如果您想要一个较短的别名，比如说
ha.streetNumber
，而不是
homemaddress.streetNumber
，您可以执行
v-for=“ha in[homemaddress]”
.container(v-model="homeAddress")    
  span {{ municipality }}
  span {{ streetNumber }}