关于watch和computed的结合监听props

技术

需求

如果你要根据props传过来的值，来执行函数，你就需要监听，props传过来的值的变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
     <div class="logo" ref="logo">
        <img :src="src" alt="">
        <p v-if="status==true">注册成为英皇宝代理</p>
    </div>
</template> 
<script>
export default {
  props: ["status"],
  data() {
    return {
      src: require("@/assets/img/sign/logo.png")
    };
  },
   //计算传过来的属性
  computed: {
    isShow() {
      return this.status;
    }
  },
  watch: {
    isShow: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        // do something, 可使用this
        console.log(newV, oldV);
          //根据属性变化改变样式
        if (newV == true) {
          this.$refs.logo.classList.add("agency");
        }
      },
      deep: true
    }
  },
  mounted() {
  
  }
};
</script>