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

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

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

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

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Node.js

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

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1560閲覧

親コンポーネントのメソッドを子コンポーネントから呼び出すにはどうすればいいですか

qwe001

総合スコア133

Vue.js

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

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Node.js

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

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2020/05/22 01:24

Vue.js 初心者です。
ある、ツイート投稿アプリをMonacaを用いて開発しています。

ツイート投稿処理はできたんですが、他にも同じような画面があり、
現状全く同じ処理をコピペで書いています。

これらの処理を親コンポーネントにまとめて、
そこから呼び出すようにしたいのですが、どうすればいいですか?

propsを用いると出来るそうですが、いまいちどう記述すればいいのかがわからず…

親コンポーネント(App.vue)

<template> <v-ons-page> <v-ons-tabbar position="top" swipeable="true" :tabs="tabs" :visible="true" :index.sync="activeIndex"></v-ons-tabbar> </v-ons-page> </template> <script> import settingsPage from './Settings.vue'; import tweetPage from './Tweet.vue'; import newsPage from './News.vue'; export default { data() { return { activeIndex: 0, tabs: [ { icon: this.md() ? null : 'ion-social-twitter', label: 'ツイート', page: tweetPage }, { icon: this.md() ? null : 'ion-ios-bell', label: 'ニュース', page: newsPage, }, ] }; }, methods: { md() { return this.$ons.platform.isAndroid(); }, openExtLink(link){ window.open = cordova.InAppBrowser.open; window.open(link, "_system", 'location=yes'); }, sendTwitter(msg, link){ var intentLink = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(msg) + "&url=" + encodeURIComponent(link) + "&hashtags=aaa"; this.openExtLink(intentLink); } }, computed: { title() { return this.tabs[this.activeIndex].label; } }, components: { settingsPage, tweetPage, newsPage } } </script>

子コンポーネント(Tweet.vue, News.vue)

テンプレートの中身とデータ受取先URLが多少異なるだけで、ロジックは全く一緒です
現状、親メソッドの呼び出し方がわからないので子メソッドに同じことを書いていますが、
子メソッドのほうを消すか、やり方を変えるなりして親メソッドを継承したいです。

PHPで言うところの extends みたいなことがしたいです

<template> <v-ons-page> <ons-list v-if="ready"> <ons-list-item class="item" tappable="true" v-for="item in items.slice(0,10)" :data="item" :key="item.link._text"> <ons-row> <ons-col> <ons-row> <div class="title" @click="openExtLink(item.link._text)">{{ item.title._text }}</div> </ons-row> <ons-row> <ons-col width="65%" align="bottom"> <div class="date" @click="openExtLink(item.link._text)">{{ item.pubDate._text }}</div> </ons-col> <ons-col width="35%"> <div class="share"> <v-ons-button @click="sendTwitter(item.title._text, item.link._text)">ツイート</v-ons-button> </div> </ons-col> </ons-row> </ons-col> </ons-row> </ons-list-item> </ons-list> <ons-list v-else> <ons-list-item class="item"> <ons-row> <p>読み込み中です…</p> </ons-row> </ons-list-item> </ons-list> </v-ons-page> </template> <script> import axios from 'axios'; export default { data() { return { item: null, ready: false, errored: false }; }, mounted() { const xmlConverter = require('xml-js'); const xmlUrl = 'https://~~~~~~.xml'; axios.get(xmlUrl, {responseType: "text"}) .then(res => { const data = JSON.parse(xmlConverter.xml2json(res.data, { compact: true, spaces: 2})); //console.log(data); if(! data){ this.items = null; throw new Error("no data found"); } let items = data.rss.channel.item; if(items.length === 0){ this.items = null; throw new Error("no record found"); } this.items = items; //console.log(this.items); this.ready = true; }) .catch((e) => { console.error(e); this.errored = true; }); }, methods: { openExtLink(link){ window.open = cordova.InAppBrowser.open; window.open(link, "_system", 'location=yes'); }, sendTwitter(msg, link){ var intentLink = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(msg) + "&url=" + encodeURIComponent(link) + "&hashtags=aaa"; this.openExtLink(intentLink); } }, } </script>

皆様お知恵をお貸しください。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

親子でのやりとりは、簡単に2種類あります

  1. 番号リスト親からデータを受け取る方法

親:子呼び出しのところで data="data" (dataは親の変数名)
子:props["data"]
参考

  1. 親から関数番号リストを受け取る方法

親:子呼び出しのところで method="method" (methodは親の関数名)
子:method内で this.$emit("method")
参考

Parent.vue

vue

1<template> 2 <child :data="data" @method="method" /> 3</temmplate> 4<script> 5import Child from "./Chid.vue 6export default{ 7 data() { 8 return { 9 data: '', 10 } 11 }, 12 methods: { 13 method(_data) { 14 console.log(_data) 15 } 16 } 17} 18</script>

Child.vue

vue

1<template> 2 <div> 3 <h1>child</h1> 4 {{data}} 5 <button @click="buttonclicked()"> 6 <div> 7</temmplate> 8<script> 9 export default{ 10 props: ['data'], 11 methods:{ 12 buttonclicked(){ 13 this.$emit("method", "child") 14 } 15 16</script>

投稿2020/05/22 07:39

oec

総合スコア271

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問