vue3感悟

一、页面路径未发生更改，只更改页面参数，如何监听

1.场景

从/admin/showHall/1更改至/admin/showHall/2，两次渲染同一个页面，所以使用onMouted()钩子函数无效，因此使用watch监听路由。

 2.代码

import { useRouter } from 'vue-router'
import { watch } from 'vue'
const route = useRoute()
watch(() => router.currentRoute.value,(newValue) => {getList(newValue.params.id)},{ immediate: true }
)

二、如何在父组件中获取通过v-for渲染的子组件中的数据

两种方法：

const commentBoxes = ref([])
const boxs = ref(null)
setTimeout(() => {console.log(boxs.value.children[1])console.log(commentBoxes.value[0])
}, 2000)

<div class="res" ref="boxs"><el-button type="primary" plain @click="openDrawer(1, null, null)">参与讨论</el-button><comment-boxv-for="i in rootRes"ref="commentBoxes":key="i.id":id="i.id":content="i.content":user_id="i.user_id":time="i.time.slice(0, 10)":likes="i.likes":like_user="i.like_user":resNum="i.resNum":royal_id="royal_id"></comment-box>
</div>

方法1：boxs.value.children，可用于修改子组件样式，如：

lastActive.value = ref1.value.children[0]
lastActive.value.style.color = 'white'
lastActive.value.style.backgroundColor = 'red'

方法2：commentBoxes.value[0]：可获取子组件内不的数据和方法，如：

console.log(commentBoxes.value[0].props)

对两种方法获取到的子组件进行打印：

考研终止。。。