[vue3] child component에 계속 변하는 값 전달하기

예를들어 주기적으로 변하는 값이 있는데 이 값은 부모한테서 받아오고, 출력은 자식에서 하는데 값이 변한다는걸 인지해서 자동으로 바꿔줘야할때가 있음(예: 파일업로드 할때 몇퍼센트 되었는지 계속 찍어줘야할때)

 

1. 전달할 ref에 데이터 넣어주기 (부모)

const num = ref(0);

// 계속 값을 전달해주는 함수에서 
// percent라는 값을 줘야할때
num.value = percent

일단 부모는 그냥 평범하게 써줌.

 

2. computed로 받기 (자식)

const props = defineProps({ num: Number });

let computedNum = computed(() => props.num.toFixed(2) * 100);

중요한것은 나는 보통 새로운 변수에 props로 받아온 값을 한번 저장한 후, 그 변수로 이것저것을 하는데 그렇게하면 값 변하는걸 인식을 못함. 그래서 그냥 바로 props.num으로 사용함.