Vue 混入 Mixins介绍

发布时间：2023-04-18 15:10:58 所属栏目：教程来源：

导读：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项。

我们在

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项。

我们在日常开发中经常遇到多个页面或者功能模块有相同代码逻辑的情况，同学们在遇到此类情况的时候肯定会想：如果这段代码能够复用就好了！。那什么方法可以帮助我们实现复用呢？答案就是：Mixin！ Mixin 帮助我们抽离公共代码逻辑。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项。

使用 mixin
接下来我一起看看如何定义和使用一个 mixin。

对于 mixin 的使用可以分为两部分：

定义 mixin
混入 mixin

定义一个 mixin
mixin 本质上就是一个 Object 对象，它和 vue 实例上的属性一致，包含 data、methods、computed、watch、生命周期函数等等：

var myMixin = {
data(){
return {
//...
}
},
created() {
//...
},
methods: {
//...
},
computed() {
// ...
}
}
混入 mixin

想要混入定义好的 mixin，只需要通过组件的 mixins 属性传入想要混入的 mixin 数组即可：

var vm = new Vue({
el: '#app',
mixins:[myMixin]
})
代码解释：
上述代码中，我们定义了一个 Vue 实例，并在实例上混入 myMixin。

接下来我们看一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
我是：{{name}}，年龄：{{year}}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义 mixin
var myMixin = {
data(){
return {
name: '句号'
}
},
created: function () {
this.mixinFun()
},
methods: {
mixinFun: function () {
console.log('mixin function')
}
}
};
var vm = new Vue({
el: '#app',
// 使用mixin
mixins:[myMixin],
data() {
return {
year: '18'
}
}
})
</script>
</html>
代码解释：
JS 代码第 3-17 行，定义了一个混入对象 myMixin，并定义了数据 data、钩子函数 created、方法 mixinFun。
JS 代码第 20 行，通过组件实例上的 mixins 属性引入 myMixin。

运行程序可以看到，在 myMixin 中定义的数据 name 渲染到页面上。同时打开控制台可以看到 ‘mixin function’ 被打印出来，说明 created 钩子函数被执行。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!