Vue -Ts入门 mixins (四)

mixin

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

创建一个mixin的文件

myMixin.ts

import { Component, Vue } from 'vue-property-decorator';

@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) 
  }
}
           

Test1.ts

// 所有案例都接着上文

<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>