#vue自定义指令

工作中逐渐积累的自定义指令

一. logs指令

调试的时候,每次需要知道传入组件的值是否发生了变化,都是需要在需要的地方打印,写了个自定义logs指令,同步写入组件其他参数,即可在value值发生变化的时候,看到value的最新值.

使用方式

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" @click="changeMsg" />
    <HelloWorld :msg="msg" v-logs="{ msg, kill }" :kill="kill" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

@Component({
  components: {
    HelloWorld
  }
})
export default class Home extends Vue {
  msg: string = "23323";
  kill: number = 12;
  changeMsg(): void {
    this.msg = "changeMsg";
    this.kill = 1;
  }
}
</script>

控制台输出

bind: expression->{ msg, kill }, value->{"msg":"23323","kill":12}, argument->undefined
update: expression->{ msg, kill }, value->{"msg":"changeMsg","kill":1}, argument->undefined