极客教程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的主要目的是解决程序中的重用问题。假设你有两个组件，其中包含一种运行的方法或执行相同功能的方法，正如以下代码所示：
Component 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);
}
}
};
Component 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 语法的示例代码如下：
// 定义 mixin 对象
var myMixin = {
created: function() {
this.hello();
},
methods: {
hello: function() {
console.log("hello from mixin!");
}
}
};
// 定义使用此 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;
}
程序执行后，您将看到以下输出：
输出结果：
