「Vue.js」ミックスイン (mixin) のサンプル

2021年9月16日

説明
ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。
ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue test - arkgame.com</title>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
// Vueオブジェクトを定義
var vm = new Vue({
      el: '#databinding',
      data: {
      },
      methods : {
      },
});
// ミックスインオブジェクトを定義
var myMixin = {
      //createdを定義
      created: function () {
            this.startmixin()
      },
      //methodsを定義
      methods: {
            startmixin: function () {
                  document.write("ようこそ ミックスインオブジェクト");
            }
      }
};
// このミックスインを使用するコンポーネントを定義
var Component = Vue.extend({
      mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>

Vue.js

Posted by arkgame

Related posts: