//父组件
<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,index) in arr"
:key='index'>
第{{index+1}}组<input type="text"
v-model="item2.name"
v-for="(item2,index) in item1.value"
:key="index">
</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>