混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
特点：
- 方法和参数在各组件中不共享
- 值为对象的选项，如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的
- 值为函数的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用
JS用法
// 创建混入
export const mixinsTest = {
methods:{
hello(){
console.log("hello");
}
},
created(){
this.hello()
}
}
<!-- 引用混入 -->
<template>
<div>
home
</div>
</template>
<script>
import {mixinsTest} from '../util/test.js'
export default {
name: "Home",
data () {
return {
};
},
created(){
console.log("home");
},
//mixins的created会先被调用,然后再执行组件的created
mixins:[mixinsTest]
}
</script>
TS用法
// 创建mixins.ts文件
import { Component, Vue } from 'vue-property-decorator';
import * as _ from "lodash"
// 引用内容随意
@Component({
filters:{
Test(arg: string){
return arg + " 我来刷点存在感"
}
}
})
export class MyMixin extends Vue{
public beforeCreate() {
console.log("beforeCreate 调用") // 前期混合注入 比如你想要的方法调用， vue-router也是在此注册
}
public mixinTitle: string = "我是一个测试的mixin 标题";
getMixinTitle(): void {
console.log(this.mixinTitle)
}
}
<template>
<div class="test1-wrap">
<div>{{ title }}</div>
<div class="roleInfo">{{ roleInfo }}</div>
<div v-for="(item, index) in roleArr" :key="index">
<div>姓名:{{ item.name }}</div>
<div>角色：{{ item.role }}</div>
</div>
<button @click="add(1)">点击</button>
<Test2 titleFromTest1="我是从test1传给子组件的值" @eventFromTest2="postMessage" />
-----------------------------------------
+ <div>coder:{{ coder | Test }}</div> // myMixin 过滤器
+ <button @click="getMixinTitle"> 测试 </button> // myMixin 方法
-----------------------------------------
<div>版本号：{{ version }}</div>
<div>{{ profile.user.firstNam }}</div>
<div>{{ fullName }}</div>
<ul>
<li v-for="(item, index) in book" :key="index">
<img :src="item.bookImg" alt="" />
<div>{{ item.bookName }}</div>
<div>{{ item.bookAuthor }}</div>
<div>¥{{ item.bookPrice }}</div>
</li>
</ul>
<router-link to="/about">跳转about</router-link>
</div>
</template>
<script lang="ts">
+ import { Vue, Component, Mixins } from "vue-property-decorator";
import Test2 from "./Test2.vue";
import { State, Action, Getter } from "vuex-class";
import { ProfileState, RootState } from "../store/types";
import { Route } from "vue-router";
import { MyMixin } from "../myMixin"
const namespace = "profile";
@Component({
components: { Test2 }
})
+ export default class Test1 extends Mixins(MyMixin) { // 也可以支持多个mixin对象
@State version!: RootState;
@State coder!: RootState;
@State profile!: ProfileState;
@Getter("fullName", { namespace }) fullName!: string;
@State("book", { namespace }) book!: object;
@Action("fetchData", { namespace }) fetchData: any;
title: string = "律师精英";
roleArr: object[] = [
{ name: " 靳东", role: "罗槟" },
{ name: " 田雨", role: "何赛" },
{ name: " 孙淳", role: "封印" }
];
beforeRouteEnter(to: Route, from: Route, next: () => void): void {
Test1.a()
next()
}
beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
console.log(this, "beforeRouteUpdate");
next();
}
beforeRouteLeave(to: Route, from: Route, next: () => void): void {
console.log(this, "beforeRouteLeave");
next();
}
get roleInfo(): string {
return this.title + "的演员列表";
}
add(a: number): void {
alert(a);
}
postMessage(e: any): void {
console.log(e);
}
static a(): void{
console.log('22222')
}
mounted() {
this.fetchData();
}
}
</script>
<style scoped>
.test1-wrap {
color: red;
}
.roleInfo {
color: blue;
padding: 10px 0;
}
</style>
与vuex的区别
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。