如何从vuejs组件访问方法？

Question

我正在使用vue.js框架构建Tic Tac Too游戏。我已经声明了一个名为的Vue组件grid-item，当单击该项目时，我希望它调用该handleClick方法。

当我运行下面的代码时，它会记录到控制台，该handleClick方法未定义。

如何解决问题并从组件访问此方法？

// vue components
Vue.component("grid-item", {
    template: "#grid-item",
    data: function() {
        return {
            sign: "X",
            owner: ""
        }
    }
})

// vue instance
new Vue({
    el: "#app",
    data: {
        matriceSize: 3,
    },
    methods: {
        handleClick: function() {
            alert("checked");
        }
    }
})

* {
  box-sizing: border-box;
}

#game-box {
  width: 150px;
  display: block;
  margin: 0px auto;
  padding: 0px;
  background: green;
}

.grid-item {
  display: inline-block;
  width: 33.333%;
  height: 50px;
  background: yellow;
  margin: 0px;
  text-align: center;
  line-height: 50px;
  border: 1px solid 
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div id="game-box">
    <grid-item v-for="n in 9"></grid-item>
  </div>
</div>

<template id="grid-item">
  <div class="grid-item" @click="handleClick"></div>
</template>

Answer 1

您handleClick在component中定义了方法时会遇到此错误：，app但是您在的模板中使用了此错误，但grid-item未定义它。

Vue方法的范围仅限于已定义的实例。

// vue components
Vue.component("grid-item", {
    template: "#grid-item",
    data: function() {
        return {
            sign: "X",
            owner: ""
        }
    },
    methods: {
        handleClick: function() {
            alert("checked");
        }
    }
})

// vue instance
new Vue({
    el: "#app",
    data: {
        matriceSize: 3,
    }
})

* {
  box-sizing: border-box;
}

#game-box {
  width: 150px;
  display: block;
  margin: 0px auto;
  padding: 0px;
  background: green;
}

.grid-item {
  display: inline-block;
  width: 33.333%;
  height: 50px;
  background: yellow;
  margin: 0px;
  text-align: center;
  line-height: 50px;
  border: 1px solid 
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div id="game-box">
    <grid-item v-for="n in 9"></grid-item>
  </div>
</div>

<template id="grid-item">
  <div class="grid-item" @click="handleClick"></div>
</template>