vue2实现井字棋小游戏附代码

用写东西来学习是最好的效果

• 运用到了子组件传递数据给父组件，父组件在回调里用$event做为参数，在调用函数时接收并使用  
• 父组件传递数据给子组件，子组件用props接收
• 用map定义了一个二维数组来接收点击时出现x和o值的位置并判断胜负逻辑

一.先静态简单九宫格样式先做出来

创建单个格子的组件名grid 宽高100px,点击后出现的字要水平垂直居中用grid布局两行代码搞定

引入grid组件并循环出九个grid 组件

外层包一层div 宽高300px,样式布局用flex自动换行，盒子模型要用标准模型边框才不会影响布局

 

二.开始实现交互
上面所说的循环引入九个grid组件已经是运用到了vue2了
在单个格子grid组件,也是唯一一个组件，做的比较简单  

• 结构上包两层div
• 外层div标签上给个点击事件，点击事件上绑定触发事件函数名里面放置点击是x还是o
• 在data里定义一个xo初始值为空，在点击事件上改变xo值
• 在data里定义一个isxo始控制XO值是隐藏显示

下面代码是grid子组件代码

<template>

  <div>

  <div class="gird" @click="num" >

      <template v-if="isxo">{ {xo}}</template>

  </div>

  </div>

</template>

<script>

export de