vue组件重复使用问题
视觉游戏 (vue-games)
A npm package which allows you to include components with games in your vue application. For now it only have a hangman game.
一个npm软件包,可让您在vue应用程序中包含游戏组件。 目前,它只有一个子手游戏。
安装 (Installation)
npm install --save vue-games
子手游戏 (Hangman Game)
<template>
<hangman-game />
</template>
<script>
import 'vue-games'
</script>
物产 (Properties)
Property | Type | Default Value |
---|---|---|
words | Array | ['Pear', 'Apple', 'Tomatoe', 'Blackberry', 'Strawberry'] |
showPlayAgain | Boolean | true |
winMessage | String | 'You win!' |
loseMessage | String | 'You lost!' |
属性 | 类型 | 默认值 |
---|---|---|
话 | 数组 | ['Pear', 'Apple', 'Tomatoe', 'Blackberry', 'Strawberry'] |
showPlayAgain | 布尔型 | true |
winMessage的 | 串 | 'You win!' |
lostMessage | 串 | 'You lost!' |
As default, HangmanGame component will have a default array with some words to play. Will show a play again button every time a game is ended, and 'You win!' and 'You lost!' messages. Its posible to change all this default values. Also, every time a game ends this component will emit gameFinished
with the current word, and a boolean value telling if the playes has won or has lost.
默认情况下,HangmanGame组件将具有带有一些单词的默认数组。 每当游戏结束时,都会显示再次播放按钮,并且“您赢了!” 和“你输了!” 消息。 可以更改所有这些默认值。 此外,每次游戏结束时,此组件都会发出gameFinished
并带有当前单词,并提供一个布尔值,该值指示玩法是赢还是输。
用法示例: (Usage example:)
Lets say we are spanish speakers, so we want to change default values:
假设我们说西班牙语,所以我们想更改默认值:
<template>
<hangman-game
:words="words"
:show-play-again="false"
:winMessage="winMessage"
:loseMessage="loseMessage"
@gameFinished="gameFinished"
/>
</template>
<script>
import 'vue-games'
export default {
data () {
return {
words: ['Pera', 'Manzana', 'Tomate', 'Cereza', 'Frutilla'],
winMessage: 'Ganaste!',
loseMessage: 'Perdiste!'
}
},
methods: {
gameFinished: function (word, lose) {
console.log('game finished!!!')
console.log('user was guessing word:', word)
console.log('she/he/it lost?', lose)
}
}
}
</script>
翻译自: https://vuejsexamples.com/reusable-vue-components-with-games-activities/
vue组件重复使用问题