如何從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

您在component： app定義了handleClick方法時會遇到此錯誤，但是您在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>