「Vue.js」ミックスイン(mixins)を定義するサンプル
書式
var ミックスイン名 = { methods: { メソッド名:function(){ //処理コード } }
使用例
<!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="appt"> <!-- testメソッドを呼び出す --> <input type="button" @click="test" value="test"> </div> <script> //ミックスインの定義 var cftMixin = { methods: { //メソッドtestの定義 test: function() { //ボタンを押下後メッセージを出力 alert("this is a test for mixins"); } } } //Vueのインスタンスを生成 var appt = new Vue({ //elオブジェクトにセレクタを設定 el: '#appt', //mixinsオブジェクトにミックスインで取り込む mixins: [ cftMixin ] }) </script> </body> </html>