父组件props值改变，子组件未更新

情况描述

// ************************父组件
<template>
  <div class="common-layout">
    <my-button @customClick="customClick" :myLoading="myLoading">点击loading</my-button>
  </div>
</template>
<script setup>
	import { ref } from "vue";
	let myLoading = ref(false);
	const customClick = () => {
	  // 改变父组件值
	  myLoading.value = true;
	  setTimeout(() => {
	    myLoading.value = false;
	  }, 1000)
	}
</script>

// **********************子组件
<template>
  <div>
    <el-button v-bind="$attrs" :loading="myLoading" @click="handleClick()">
      <slot></slot>
    </el-button>
  </div>
</template>
<script lang="ts" setup>
	import { ref, defineEmits, defineProps} from "vue";
	let props = defineProps(["myLoading"]);
	// 接收父组件传来的值
	let myLoading = ref(props.myLoading);
	let emit = defineEmits(["customClick"]);
	const handleClick = (num: number) => {
	  emit("customClick", myLoading.value);
	};
</script>

原因

是子组件props对象不是ref对象，无法根据父组件变化而更新视图

解决方案

1. toRefs（此方案是用toRefs去给props加一层包装，使其变成响应式的）

	let props = defineProps(["myLoading"]);
	// 接收父组件传来的值
	let myLoading = toRefs(props).myLoading;

2. watch（此方案通过监听props值的变化）

    watch(() => props.myLoading, (newValue, oldValue) => {
     myLoading.value = newValue;
   });

3. 用computed计算属性

    const myLoading= computed({
     get: () => {
       return props.myLoading;
     }
   });