一つのファイルに大量の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)
typescript
1//main.ts 2 3import Vue from 'vue'; 4import VueRouter from 'vue-router' 5import VueObserveVisibility from 'vue-observe-visibility' 6import axios from 'axios'; 7import jquery from 'jquery'; 8 9import * as Models from '../../system/typescript-angularjs-client-generated/model/models'; 10 11/// <reference path="../typings/index.d.ts" /> 12 13/// <reference path="../typings/globals/jquery/index.d.ts" /> 14 15declare var require: any 16const send_message = require('../vue/send_message.vue').default; 17Vue.use(VueObserveVisibility) 18 19export class Main_contents { 20 21 getData(): void { 22 23 let vue = new Vue({ 24 el: "#all_contents", 25 data: { 26 test: "test" 27 }, 28 mounted: function (): void { 29 30 }, 31 methods: { 32 send_message: function (): void { 33 this.$refs.send_message_ref.send_message(1,2,3,4) 34 }, 35 36 37 }, 38 components: { 39 'send_message': send_message 40 } 41 }); 42 43 }) 44 }) 45 } 46} 47
vue
1//vue単一コンポーネントファイル(send_message.vue) 2 3<template> 4 5</template> 6 7<script> 8import axios from "axios"; 9 10import main from "../ts/main"; 11 12export default { 13mixins: [main], 14 data: function() { 15 return { 16 url: "url", 17 result: [] 18 }; 19 }, 20mounted: function(){ 21 console.log(this.test) 22 }, 23 props: [], 24 methods: { 25 send_message: function(a, b, c, d) { 26 let params = new URLSearchParams(); 27 params.append("a", a); 28 params.append("b", b); 29 params.append("c", c); 30 params.append("d", d); 31 axios 32 .post(this.url + "api/1/test/message__send.php", params) 33 .then(response => { 34 }); 35 } 36 } 37}; 38</script>
html
1 2<div class="send_button" v-on:click="send_message();">送信</div> 3<send_message ref="send_message_ref"></send_message> 4
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/01/31 02:13
退会済みユーザー
2018/01/31 02:26 編集
退会済みユーザー
2018/01/31 03:08