Vue.js Mixins
在Vue.js中，mixins是一组定义的逻辑，以Vue.js指定的预定义方式存储。我们可以反复使用这些mixins向我们的Vue.js实例和组件添加功能。因此，可以说mixins用于分配Vue组件的可重用功能。它们提供了一种灵活直接的方式来处理Vue.js组件并在其中共享可重用的代码。
mixin对象可以包含任何组件选项。当组件使用mixin时，mixin中的所有选项都会"混合"到组件自己的选项中，并成为组件选项的组成部分。
为什么Mixins重要？
以下是一些使Vue.js mixins必要的功能的列表:
js mixins确保不需要重复，可以有效地分配Vue.js组件的可重用功能，并一次又一次地使用它们。
js mixins提供了出色的灵活性，mixin对象包含Vue组件选项，这意味着它是Vue.js的mixin和组件选项的组合。
js mixins提供了出色的安全功能，如果编写得当，它们不会影响超出定义范围的更改。
js mixins是实现代码可重用性的绝佳平台。
Vue.js mixins应该解决的问题
使用Vue.js用于解决程序中的重用问题。假设您有两个组件，它们包含的方法在两个组件中执行的功能完全相同，或执行的功能与以下代码相同:
组件1:
<template>
<div>
<button v-on:click="clicked('you just clicked on button 1')">
Button 1
</button>
</div>
</template>;
export default {
name: "Test",
methods: {
clicked(value) {
alert(value);
}
}
};
组件2:
<template>
<div>
<button v-on:click="clicked('you just clicked on button 2')">
Button 2
</button>
</div>
</template>;
export default {
name: "Modal",
methods: {
clicked(value) {
alert(value);
}
}
};
使用这两个组件之后，您的App.vue文件应同时导入和声明两个组件，如下所示:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Test />
<modal />
</div>
</template>;
<script>
import Test from "./components/Test.vue";
import Modal from "./components/Modal.vue";
export default {
name: "app",
components: {
Test,
Modal
}
};
</script>
在这里，您可以看到我们在两个组件中都重复了click方法代码块。这不是处理内存资源的理想而有效的方法。这就是为什么引入Vue.js Mixin的原因。
Vue.js引入了mixins作为解决此问题的绝佳方法。通过使用mixins，您可以封装一段代码或功能，然后将其导入以在各种组件中需要时使用。
Vue.js Mixin语法
Vue.js mixin语法类似于以下代码:
// define a mixin object
var myMixin = {
created: function() {
this.hello();
},
methods: {
hello: function() {
console.log("hello from mixin!");
}
}
};
// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin]
});
var component = new Component(); // => "hello from mixin!"
让我们以一个简单的示例很好地理解Vue.js Mixin的概念。
Index.html文件:
<html>
<head>
<title>Vue.js </title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id = "mixin_1"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#mixin_1',
data: {
},
methods : {
},
});
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
alert("This is a Vue.js Mixin example!!");
}
}
};
</script>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component()
让我们使用一个简单的CSS文件来使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
