如何从 vuejs 组件访问方法？

Question

我正在使用 vue.js 框架构建 Tic Tac Too 游戏。我已经声明了一个名为 grid-item 的 vue 组件，当单击此项时我希望它调用 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 方法时收到此错误：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>

如何从 vuejs 组件访问方法？

How to access a method from vuejs component?

javascript

vue.js

vue-component

vuejs2