父组件：
<template>
<view><test-list :list="listData" @change="onListChange"></test-list></view>
</template>
<script>
export default {
name: 'test-container',
data() {
return {
listData: ['aaa', 'bbb']
};
},
methods: {
onListChange() {
console.log('container', this.listData);
}
},
mounted() {
setTimeout(() => {
this.listData.push('父组件push的');
}, 600);
}
};
</script>子组件：
<template>
<view>
<view v-for="(item, index) in list" :key="index">{{ item }}</view>
</view>
</template>
<script>
export default {
name: 'test-list',
props: {
list: {
type: Array,
default() {
return [];
}
}
},
methods: {
change() {
this.$emit('change');
}
},
mounted() {
setTimeout(() => {
this.list.push('子组件push的');
this.$forceUpdate();
console.log('list', this.list.length, this.list);
this.change();
}, 1000);
}
};
</script>
0 个回复