vue 父组件怎么获取子组件中的值

Question

子组件：

<template>
    <h1>{{id}}</h1>
</template>

<script>
import {ref} from "vue";

export default {
    setup() {
        const id = ref(1);
        
        return {id}
    }
}
</script>

父组件，父组件里面怎么获取子组件中的id，能不能在父组件中监听到子组件中的id变化

<template>
    <h1>{{id}}</h1>
</template>

<script>
import {ref} from "vue";

export default {
    setup() {
        const id = ref();
        
        return {id}
    }
}
</script>

Answer 1

”父组件监听子组件ID的变化“，说明现在逻辑上某个状态的变化是子组件在做，而状态本身是父组件直接关心的。那么这个状态理应是父组件hold，并通过props交给子组件不管是交互也好，修饰也好，父组件对于子组件的逻辑不关心，关心的是把状态下放回收结果。

还是改变一下逻辑，状态该提升提升，该props传递就传递

非要监听也只能子组件抛事件，父组件来处理。这样子组件多一个watch id，$emit idChange事件，父组件多一个idChange handler