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

Question

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>

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

Answer 1

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

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

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

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

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

Parent.vue

<template>
  <child :data="data" @method="method" />
</temmplate>
<script>
import Child from "./Chid.vue
export default{
    data() {
      return {
        data: '',
      }
    },
    methods: {
      method(_data) {
        console.log(_data)
      }
    }
}
</script>

Child.vue

<template>
 <div>
    <h1>child</h1>
    {{data}}
    <button @click="buttonclicked()">
 <div>
</temmplate>
<script>
  export default{
    props: ['data'],
    methods:{
      buttonclicked(){
        this.$emit("method", "child")
    }

</script>