「Vue.js」ミックスイン (mixin) のサンプル
説明
ミックスイン (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>
<!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>
<!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>