Vue 3:附加到子组件prop上

Question

我正在创建一个学习Vue 3的小益智游戏，当试图在子组件中向数组添加值时被卡住了。

这是父元素:

<template>
<div class="home">
<Puzzle :guess="puzzleGuess" />
</div>
</template>

这是子组件'Puzzle':

<template>
<div>
<div class="row">
<img :src="require(`@/assets/${imgPath}`)" alt="Puzzle image" class="puzzleImage" >
</div>
<div class="row puzzleIcon" :key="i" v-for="(char, i) in word">
<span v-if="hasGuessedChar(char)">{{char}}</span>
<span v-else>
<i class="large material-icons">remove</i>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'Puzzle',
props: {
word: Array,
imgPath: String,
guess: Array,
},
methods: {
hasGuessedChar(char) {
if(char == '') return false;
if(this.guess.indexOf(char) > -1) return true;

return false;
}
}
}    
</script>

基本上，每当在父组件中更新proppuzzleGuess时，我想将一个字符推送到子组件的guess数组属性。与当前发布的代码，我只是继续覆盖guess变量，而不是追加到它。

Answer 1

首先，您必须知道guess和puzzleGuess是相同的。因此，在子组件中推入或观察某些内容在大多数情况下会导致无限循环错误。

如果您希望仅在父组件中发生事件时添加char，则解决方案是在子组件中创建本地数据:loaclGuess。加载guess，并为guess设置监视器。

但是在子组件

中试试这个

data() {
return {
loaclGuess: this.guess
}
}

然后

pushCharToGuess(char) {
if(char == '') return false;
// Important has to stop it to avoid empty loop 
if(!this. loaclGuess.includes(char)) return true;
// Push char
this.loaclGuess.push(char);
}

Answer 2

受到@MohKoma建议的答案的启发，我得出了这个解决方案(不确定是否与@MohKoma建议的相同):

父组件:

<template>
<div class="home">
<Puzzle :guess="puzzleGuess" />
<hr />
<div class="letters-container">
<Letters @clickLetter="clickLetter" />
</div>
</div>
</template>
<script>      
export default {
name: 'Home',
components: {
Letters,
Puzzle
},
data() {
return{          
puzzleGuess: []
}
},
methods: {
clickLetter(letter) {
this.puzzleGuess.push(letter.val.toLowerCase());
}
}
}
</script>

…子组件保持不变:

<template>
<div>
<div class="row puzzleIcon" :key="i" v-for="(char, i) in word">
<span v-if="hasGuessedChar(char)">{{char}}</span>
<span v-else>
<i class="large material-icons">remove</i>
</span>
</div>
</div>
</template>
<script>
export default {
name: 'Puzzle',
props: {
word: Array,
guess: Array,
},
methods: {
hasGuessedChar(char) {
if(char == '') return false;
if(this.guess.indexOf(char) > -1) return true;

return false;
}
}
}    
</script>

基本上，我们不是将值压入到子组件中的数组中而是将值压入到一个局部数组中然后将该数组传递给子组件