混入 (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：則是在引入組件之後與組件中的對象和方法進行合併，相當於擴展了父組件的對象與方法，可以理解爲形成了一個新的組件。