質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1248閲覧

[Nuxt]componentsのメソッドをpagesで使いたい

apptail

総合スコア14

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/25 06:03

概要

Nuxt.jsのcomponentsのメソッドをpagesのメソッドから呼び出したいです。
しかし、下記ソースのように呼び出した場合、

components_testcomp_vue__WEBPACK_IMPORTED_MODULE_5__.default.compMethod is not a function

のようなエラーが発生し、メソッドが認識できていないようです。
記述方法に誤りがあるのでしょうか?
ぜひご教授お願い致します。

※実際のソースから、こちらでの公開向けに変えているので、矛盾等ありましたらご指摘ください

ソース

pages/

1<template> 2 <div> 3 {{callCompMethod()}} 4 </div> 5</template> 6 7<script> 8import testComp from "../components/testComp.vue"; 9 10export default { 11 components: { 12 testComp 13 }, 14 methods: { 15 callCompMethod(hasIcon) { 16 return testComp.compMethod(); 17 } 18 } 19} 20

components/testcomp.vue

1<script> 2export default { 3 methods: { 4 compMethod() { 5 consolle.log("called"); 6 } 7 } 8}; 9</script> 10

エラー

components_testcomp_vue__WEBPACK_IMPORTED_MODULE_5__.default.compMethod is not a function

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

コンポーネントの外部からメソッドを直接呼び出してしまうと、カプセル化の原則に反してしまい保守性が低くなるのでやめたほうが良いと思います。

直接呼び出ししない場合、対処方法は概ね3パターンあって、1が可能なら1を最優先、2および3はケースによって使い分けます。

  1. 外部ファイルとして切り出せるなら切り出して再利用
  2. propsVuexといった親子のどちらからでも参照できるリアクティブな値を、子コンポーネントのcomputedwatchで監視してメソッドを呼び出す
  3. EventBusを作ってイベント経由でメソッドを呼び出す

また、代替手段がないか設計を練り直すのも手です。

投稿2019/04/26 01:59

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

apptail

2019/04/26 04:37

componentの値を親(page)で取得して、値を使ってtemplateに当てはめようと思ってましたが、 そうではなく子のtemplateで完結させてそれをタグとして親で使うようにしようと思います。 これが本来のやり方と気付きました。ありがとうございます。
guest

0

componentの内部で定義したロジックに対して「componentの外でも使いたい」という欲求が出てくるということは、そのロジックは最早component内部で完結していない状態だと思います。
その場合、ロジック自体を単独のjsファイルとして切り出して、同じロジックを使いたいcomponent/pageでそれぞれimportして利用するべきかと。

投稿2019/04/25 16:49

philomagi

総合スコア267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

apptail

2019/04/26 04:24

やはり直接呼び出すべきではない(呼び出せない)のですね。 jsまたはtsファイルとして検討してみます。
apptail

2019/04/26 04:37

componentの値を親(page)で取得して、値を使ってtemplateに当てはめようと思ってましたが、 そうではなく子のtemplateで完結させてそれをタグとして親で使うようにしようと思います。 これが本来のやり方と気付きました。ありがとうございます。
guest

0

return testComp.methods.compMethod(); のようにmethods経由で呼び出せないでしょうか。

投稿2019/04/25 12:01

iwamot

総合スコア1154

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

apptail

2019/04/26 04:24

methods経由では呼び出せませんでした。ありがとうございます!
iwamot

2019/04/29 07:32

他の方の「やるべきではない」という回答に異論はありません。ただ、ぼくの環境ではmethods経由で呼び出せたことは申し添えておきます。どうしてもやりたい方がいらっしゃるかもしれないので。
apptail

2019/05/02 05:00

ありがとうございます! 僕の書き方が何かおかしかったのだと思いますので、他の方でやりたい方がいらっしゃれば、こちらを参考に頂ければと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問