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)

 参与讨论 

方法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)

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

考研终止。。。