有没有更简单的方法来访问 Vue 模板中的嵌套对象属性？

Question

将数据分组到嵌套对象属性中很方便。通过这样做，我们不必将数据字段中的属性收集到实体中以供以后使用。如下例所示，

var demo = new Vue({
	el: '#demo',
        data: {
  	  level1: {
    	    level2: {
      	      level3_1: 'Hello',
              level3_2: 'world'
            }
          }
        }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="demo">
  <div class="person">
    <h3>{{ level1.level2.level3_1 }}</h3>
    <p>{{ level1.level2.level3_2 }}</p>
  </div>
</div>

然而，必须输入“level1.level2”前缀才能到达 level3_x 字段，这确实有点过分了。如果有大量的level3字段，那就很麻烦了。

我想知道是否有什么方法可以节省一遍又一遍地输入 level1.level2 的工作。模板是否具有任何语法，以便某些部分位于“level1.level2”的范围内？Vue 是否提供任何支持，以便在这种情况下假定前缀“level1.level2”？

Answer 1

有几个选择。

1. 使用v-for

块内的所有内容的v-for范围都限定在您要迭代的级别。像这样做：

var demo = new Vue({
	el: '#demo',
        data: {
  	  level1: {
    	    level2: {
      	      level3_1: 'Hello',
              level3_2: 'world'
            }
          }
        }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="demo">
  <div class="person">
    <template v-for="(l2prop, l2propName) in level1">
        <h3>{{ l2prop.level3_1 }}</h3>
        <p>{{ l2prop.level3_2 }}</p>
    </template>
  </div>
</div>

2. 使用组件

组件获取其父级数据的子集，因此它们会自动确定范围。像这样做：

Vue.component( "person", {
    props: ['data'],
    template: '<div class="person"><h3>{{ data.level3_1 }}</h3><p>{{ data.level3_2 }}</p></div>'
});

var demo = new Vue({
	el: '#demo',
        data: {
  	  level1: {
    	    level2: {
      	      level3_1: 'Hello',
              level3_2: 'world'
            }
          }
        }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="demo">
  <person v-bind:data="level1.level2"></person>
</div>