Q&A
タイトルのとおりなのですが、templateのクリックイベントに
testAlert関数が渡せません。
出ているエラーはこちらです。
Property "testAlert" was accessed during render but is not defined on instance. at <MyTemplate> at <App>
templateを使う際にはなにか別途設定が必要なのでしょうか?
html
1 <body> 2 <div id="app"> 3 <my-template></my-template> 4 </div> 5 <script src="./vue.js"></script> 6 </body>
JavaScript
1const myApp = { 2 data() { 3 return {}; 4 }, 5 methods: { 6 // 渡したい関数 7 testAlert() { 8 alert("テストです"); 9 }, 10 }, 11}; 12 13const app = Vue.createApp(myApp); 14 15app.component("my-template", { 16 template: ` 17 <button @click="testAlert">ボタン</button> 18 `, 19}); 20 21app.mount("#app"); 22
ご存じの方がおられましたらご教示願います。
回答1件
0
ベストアンサー
vue3はあまり知りませんがvueのコンポーネントは親と子でそこそこ厳しく分かれていて
子が親のメソッドを呼び出すにはemitを使う必要があります。
多分こんな感じだと思います。
js
1app.component("my-template", { 2 template: ` 3 <button v-on:click="$emit('testAlert')">ボタン</button> 4 `, 5});
投稿2022/01/19 06:43
総合スコア3828
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。