父组件
<template>
<div id="app">
<el-button @click="clickGetChild">父组件修改id的值</el-button>
<homeCom ref="refHomeCom" :id="id"></homeCom>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import homeCom from "./components/home.vue";
// 变量
const refHomeCom = ref(null);
let id = ref("1");
onMounted(() => {});
const clickGetChild = () => {
id.value += "33";
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件
<template>
<div class="child-style">
<h3>watchEffect 监听变化</h3>
&