v-model v-for 父子组件的使用

//父组件
<template>
  <div class='HelloWorld'>
    <!-- 这里不需要async，因为没有改变对象的地址，只是改变了对象里面的响应式值而已 -->
    <hello-world-com :arr="show.arr" />
    父组件：{{show.arr}}
    <button @click="changeArr">点击</button>
  </div>
</template>

<script>
import HelloWorldCom from "./HelloWorldCom.vue";
const _data = {
  show: {
    arr: [
      {
        value: [
          {
            name: "张三",
          },
          {
            name: "李四",
          },
        ],
      },
      {
        value: [
          {
            name: "李四",
          },
          {
            name: "张三",
          },
        ],
      },
      {
        value: [
          {
            name: "王五",
          },
          {
            name: "赵六",
          },
        ],
      },
    ],
  },
};
export default {
  name: "HelloWorld",
  components: { HelloWorldCom },
  filters: {},
  props: {},
  data() {
    return _data;
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    changeArr() {
      this.show.arr = [{ value: 5 }, { value: 6 }];
    },
  },
};
</script>
<style lang='scss' scoped>
</style>

<template>
  <div class='HelloWorldCom'>
    <div v-for="(item1,index1) in arr"
         :key='index1'>
          <!-- 这里key需要绑定唯一的值 -->
      第{{index1+1}}组<input type="text"
             v-model="item2.name"
             v-for="(item2,index2) in item1.value"
             :key="index2">
    </div>
    <div> 子组件：{{arr}}</div>

  </div>
</template>

<script>
const _data = {};
export default {
  name: "HelloWorldCom",
  components: {},
  filters: {},
  props: {
    arr: "",
  },
  data() {
    return _data;
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
</style>