vuejsの単一ファイルコンポーネントについて

Question

一つのファイルに大量のvueのmethodsができてしまうことを避けるために、メソッドをいくつかの単一ファイルコンポーネント(.Vue)に分けようとしたのですが、けっこう使い方が難しいです。

まず、メソッドを分けたいだけなので、

<template></template>

は書かずにメソッドを書こうとしたのですが、メソッドを呼び出すために
html側で

<send_message ref="send_message_ref"></send_message>

例えばこのように呼び出したvueの単一ファイルコンポーネントのtemplateに対応するタグをわざわざ作って、ref属性を作らなければならない。

this.$refs.send_message_ref.send_message(1,2,3,4)

そして、このように呼び出した別ファイルのvueメソッドにreturnを書いても、値が返ってこない(send_messageメソッドにreturnを書いても値が返ってこない)(T_T)
値をもらうためには$emit()を使って親ファイルのメソッドを発火させて渡す
そうなると、親ファイルのメソッドに$emit()で発火してもらうメソッドを新たに追加しなけれないけないしで、何だかコードが結局スマートにならない(T___T)

大変読みにくくて申し訳ないのですが、自分は何か間違えているのでしょか(T_T)

下のコードは情報流出を避けるためにすごい省いてて意味不明かもしれませんが見てみてください(T_T)

//main.ts

import Vue from 'vue';
import VueRouter from 'vue-router'
import VueObserveVisibility from 'vue-observe-visibility'
import axios from 'axios';
import jquery from 'jquery';

import * as Models from '../../system/typescript-angularjs-client-generated/model/models';

/// <reference path="../typings/index.d.ts" />

/// <reference path="../typings/globals/jquery/index.d.ts" />

declare var require: any
const send_message = require('../vue/send_message.vue').default;
Vue.use(VueObserveVisibility)

export class Main_contents {

    getData(): void {
       
        let vue = new Vue({
            el: "#all_contents",
            data: {
                test: "test"
            },
            mounted: function (): void {
                
            },
            methods: {
                send_message: function (): void {
                    this.$refs.send_message_ref.send_message(1,2,3,4)    
                },
                

            },
            components: {
                'send_message': send_message
            }
        });
      
            })
        })
    }
}

//vue単一コンポーネントファイル(send_message.vue)

<template>
                    
</template>

<script>
import axios from "axios";

import main from "../ts/main";

export default {
mixins: [main],
  data: function() {
    return {
      url: "url",
      result: []
    };
  },
mounted: function(){
       console.log(this.test)
   },
  props: [],
  methods: {
    send_message: function(a, b, c, d) {
      let params = new URLSearchParams();
      params.append("a", a);
      params.append("b", b);
      params.append("c", c);
      params.append("d", d);
      axios
        .post(this.url + "api/1/test/message__send.php", params)
        .then(response => {
        });
    }
  }
};
</script>

<div class="send_button" v-on:click="send_message();">送信</div>
<send_message ref="send_message_ref"></send_message>

Answer 1

全部読んだわけではないですが、共通化するならMixinを利用してはいかがでしょうか？
公式ドキュメントでは単一コンポーネントの例はなかったので下記記事を貼っておきます

https://kuroeveryday.blogspot.jp/2017/07/vuejs-mixin-viewmodel.html

Comments

[退会済みユーザー]

回答ありがとうございます。共通化することでデータを受け渡しせずにできるのは便利そうです。これって単一ファイルコンポーネント(上で言うsend_message.vue)で親コンポーネント(上で言うtypescriptファイルの方)を呼び出す感じでしょうか。親コンポーネントはクラスの中のメソッドになってしまっているんですけど、どのように呼び出せば良いでしょうか(>___<)すみません

[退会済みユーザー]

コードを追加しましたがさすがにこれじゃできないですよね(T_T)親typescriptファイルを子コンポーネントでimportしてmixinに登録して親コンポーネントのdata(test:"test")を子コンポーネントで呼び出すみたいなのを書いて見たのですが...

[退会済みユーザー]

これそもそもtypescriptでこうゆう形式で書くと無理だったりするのかな...。無理なら無理で仕方ないですが(>___<)