编写一个Cube组件,入参为num, 当num=3时,输出表格效果为: 1 1 1 2 2 2 3 3 3 当num=4时,输出表格效果为: 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4 以此类推。 要求: 根据代码样例文件(index.vue和Cube.vue)进行修改 在父组件(index.vue)实现输入框,输入或修改数字后自动刷新生成表格 子组件(Cube.vue)中判断参数是否合法(数字且在[1,10]之间),如果不合法,通知父组件,父组件背景变为红色,合法则恢复原来颜色
时间: 2023-05-19 16:02:11 浏览: 100
以下是一个可能的实现:
index.vue:
<template>
<div :style="{background: bgColor}">
<label for="num">输入数字:</label>
<input type="number" id="num" v-model="num" @input="updateTable">
<Cube :num="num" @valid="valid = $event"></Cube>
</div>
</template>
<script>
import Cube from './Cube.vue'
export default {
components: {
Cube
},
data() {
return {
num: 3,
valid: true
}
},
computed: {
bgColor() {
return this.valid ? 'white' : 'red'
}
},
methods: {
updateTable() {
this.valid = true
}
}
}
</script>
Cube.vue:
<template>
<table>
<tbody>
<tr v-for="row in table" :key="row[0]">
<td v-for="cell in row" :key="cell">{{ cell }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
num: {
type: Number,
required: true,
validator: value => value >= 1 && value <= 10
}
},
computed: {
table() {
const table = []
for (let i = 1; i <= this.num; i++) {
const row = []
for (let j = 1; j <= this.num; j++) {
for (let k = 1; k <= this.num; k++) {
row.push(i)
}
}
table.push(row)
}
return table
}
},
watch: {
num() {
this.$emit('valid', true)
}
},
mounted() {
if (!this.$props.validator(this.num)) {
this.$emit('valid', false)
}
}
}
</script>
这个实现中,父组件 index.vue 包含一个输入框和一个 Cube 组件。输入框的值绑定到 num 变量上,每次输入时会触发 updateTable 方法,将 valid 变量重置为 true。Cube 组件接收 num 属性,根据 num 属性生成一个二维数组 table,其中每个元素都是一个数字。如果 num 不在 [1, 10] 范围内,Cube 组件会触发 valid 事件,将参数设置为 false。父组件根据 valid 变量的值来决定背景颜色。