vue组件重复使用问题_游戏活动中可重复使用的Vue组件

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 gameFinishedwith 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组件重复使用问题