vue3中遇到的问题

一、props传动态值，并给子组件变量赋值

        由于是变量在父组件是动态的，所以子组件中虽然Props取得了值，但是子组件的变量却取不了，

        解决：在子组件监听子组件的变量即可

watch(()=>props.list,()=>{
        state.upList = props.list;
      })

二、通过计算属性对标签动态赋值类名(一般通过变量来修改class时，变量用计算属性）

        解决：用computed返回对象

<img class="ab_r pointer" :src="`public/imgs/icons/${state.eye.old}`" alt=""
                 @click="state.changeEye('old')">
<img class="ab_r pointer" :src="`public/imgs/icons/${state.eye.new}`" alt=""
                 @click="state.changeEye('new')">



let state=reactive({
    eyeStyleObj: {
        old: 'eye_close.png',
        new: 'eye_close.png',
        req: 'eye_close.png',
      },
    eyeType: '',
    eye: computed(() => {
        let type = state.eyeType
        if (type != '') {
          state.eyeStyleObj[type] = state[type] ? 'eye_open.png' : 'eye_close.png'
        }
        return state.eyeStyleObj
      }),
    changeEye(type) {
        state[type] = !state[type]
        state.eyeType = type
      },
})

三、写个多页面可共用的倒计时（一个页面多次引用的时候，需要多次定义let timer、let timer1..)

        方法一定时器引用方法：

        

import useTimer from "@/assets/hooks/useTimer";
export default defineComponent({
    name: "updateTel",
    setup(props, {emit}) {
        let timer = new useTimer(300);
        timer.start().codeTime
.......
    }    
}）

        方法二定时器引用方法： let timer=useTimer(倒计时时间)其它一样

import {ref, onMounted, onUnmounted, onDeactivated, onActivated} from "vue";

//定时器统一用法
//方法一：
class useTimer1 {
  constructor(time) {
    this.codeTime = ref(time)
    this.codeTimer = null;
    onUnmounted(
      () => {
        clearInterval(this.codeTimer);
      }
    )

    onDeactivated(() => {
      clearInterval(this.codeTimer);
    })
  }


  start() {
    clearInterval(this.codeTimer)
    this.codeTimer = setInterval(() => {
      this.codeTime.value >= 1 ? this.codeTime.value-- : clearInterval(this.codeTimer)
      console.log(1000);
    }, 1000)
    return {
      codeTime: this.codeTime
    }
  }

  end() {
    clearInterval(this.codeTimer);
  }
}


//方法二：
function useTimer(time) {
  let codeTime = ref(time)
  let codeTimer = null;
  onUnmounted(
    () => {
      clearInterval(codeTimer);
    }
  )

  onDeactivated(() => {
    clearInterval(codeTimer);
  })

  return {
    start() {
      codeTime.value >= 1 ? codeTime.value-- : clearInterval(codeTimer)
      clearInterval(codeTimer)
      codeTimer = setInterval(() => {
        codeTime.value >= 1 ? codeTime.value-- : clearInterval(codeTimer)
        console.log(1000);
      }, 1000)
      return {
        codeTime: codeTime
      }
    },
    end() {
      clearInterval(codeTimer);
    }
  }
}

export default useTimer;