原文网址:Vue--mixin(混入)--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介说明
本文用示例介绍Vue的mixin(mixins)的用法。
mixin中文为:混入。
官网
混入 — Vue.js
mixin简介
Mixin是一种更好的复用代码的模式。java , Object C 中的 interface , implements, extends 等关键字的意义,就是为了让代码可以复用、继承。同样的,在vue中,用mixin来实现可复用。
Mixin 实际上是利用语言的特性(关键字),以更加简洁易懂的方式,实现了 “设计模式”中的 “组合模式”。 可以定义一个公共的类,这个类就叫做”mixin”。然后让其他的类,通过“include” 语言特性包含mixin,直接具备了 mixin 所具备的各种方法、数据等。
示例src/mixins/SayHello.js
export default {
data() {
return {
mixinName: "SayHello.js"
}
},
methods: {
sayHello(name){
return "hello," + name;
}
}
}
src/components/CompA.vue
{{ mixinName + ": " + sayHello(name) }}
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/compA',
name: 'compA',
component: CompA
}
]
})
测试
访问:http://localhost:8080/#/compA
其他网址Vue混合mixins - 小火柴的蓝色理想 - 博客园



