Vue.js (Vue CLI 3) 共通関数の処理 SPA開発(9) #Vue.js #web #firebase #SPA

index:

概要:

前のSPA(SinglePageApplication) 関連で、
自作した共通関数を、Vueコンポーネントから呼び出す場合の
処理となります。Mixin 使いました。

環境

Vue-CLI 3.6.6
Vue.js
vue-router
firebase

実装など

・mixin.js
https://github.com/kuc-arc-f/vue_2_ver3/blob/master/src/mixin.js

export const Mixin =  {
    created:function(){
    },
    test_func(){
        return 'ABC'
    },

  }
}

・test.vue
https://github.com/kuc-arc-f/vue_2_ver3/blob/master/src/components/Tasks/test.vue

import で、mixin　読込み。
this.test_func()　で実行。

<script>
import {Mixin} from '../../mixin'

export default {
    mixins:[Mixin],
    created() {
        console.log( 'test_func='+ this.test_func() )
    },
    data() {
        return {
            user : [],
            message :''
        }
    },
    methods: {
    }
}
</script>