Vue 3中如何正确获取子组件插槽内的DOM实例?-灵析社区

加班使我熟睡

vue3中,怎么获取子组件插槽内的DOM实例或者说ref? 我尝试这样获取,但是获取不到: //base-popup.vue 子组件 import { ref } from 'vue'; let slotRef = ref() function setSlotRef(el) { slotRef.value = el console.log('1:我执行了', el) } //ds-popup.vue //我想默认让这个input聚焦,不考虑自定指令 //发现子组件的setSlotRef没有执行

阅读量:115

点赞量:0

问AI
你这样也太依赖插槽的内容组件了吧。 给子组件添加一个 "autofocus"的 "props" 属性,让插槽元素内部自己去处理自动聚焦不行吗? *** Edit 哦,大概知道OP的需求了。应该是想在 "popup" 打开的时候自动聚焦到 "popup" 内部的 "input" 元素。所以如果这样的话,组件的设计应该是 "base-popup" 新增加一个 "on-show" 的事件在 "popup" 显示时抛出,再在你的 "ds-popup" 中接收 "on-show" 事件,自己去处理 "input" 元素的聚焦业务。 我写了一个使用 "Element Plus" UI库的 "Playground 在线Demo" (https://link.segmentfault.com/?enc=rjd4vKhy%2BmalIeI5Fh%2BBTA%3D%3D.TCnIYHM0kepRba%2Bm0WGocCOHpI%2BC%2FoawnFVykUsCHQc62%2BhRqjdsdt0bz5dBIiYiBv2eJ7N2eTtKkAFeivdgUfaH%2B3oqeO1bLQaIKpMDvz2oMjaejIhEcshLYoyFcg%2FEGfCO4sE710zir%2BjJ%2F8dqHbQVMCgp6Ky6uwkAYGsB5MegSrPDzWxUgYqYcO5EsZHsbKxgRFt2vtpkXqZqrlSWLEo160o%2FPJOojrESCbwEE0Ey%2BhOPTzyg2VwxOym6T3EixLx0oDlSEhF2ORnMMN41xVFrlAMrlx4u5zZknIXonfpTuP9pb7bvHwBbCVGRdd%2BHjhl3296JLsksBSpylmtATVlWUZOv40DyGBlpBLsGu9FWXpPZu7v6ON387xabH%2BeUASseuOmHONsUR187flTje0X2nsD06h42o2tl9cci0CNwNfep9DgLyl9f%2FhoGS3jD8brDWJ5UHVARvKEAhmwOjOQM30iO7MWeIy5DxG8aJZG5ooBNOaMiIbB5R3SGRyJb92ENodPs%2BZWHpR7IM%2BqiqONOmfRdIckZBjzluDd%2BTdy3a%2Bckci8ZWuT7OFALhHyHgCQAbGN%2BZrg374zR%2BCz38eptifKWt4qBLkVGP0T2QuU8mmiTiQ9A2zN%2FN71ULAqmxqNVAbGX%2F3yzchSNCfzhDktnboctau2995So9baErHyWU15GwBlXMMzJXkJbMf%2FIUFcX7lJRk9raCyPmelfS1jeFFgVMV%2BKec%2F7ZNnW9FzqeL7Kg2GRE0bPm9hgTLvGQBTzKmm%2BUE15zrzkPl5thb8vtBMS%2F1QMarpf9YdhLOzhwTNsSc3GIyVkceb%2B%2FXyDCh1Ng%2BD%2F%2BeCBAayumbcUYEKspNfIudzPEG0DnVvZ%2FREY%2BiI3FWTLSp1CSwnxMRwa%2F5E2%2FfkxCfrO1eaeWdPpJQftvDJwWwOyF1iwECOiwOJSODHZPGNHDJ5LPo31vJrhTn7KmH3wo2dAACjm6SAkM2oDXFU2l8A6Xa3BcZbVJq8wJlaZ%2F9w7N7VYOAVtBLN58df%2BTwLKfhENLQ3WDxZLcJ%2FcpLbh9Cxi4omFXMwJF4%2FhdmZ6VQcIyWqC38D%2BS1fvyoTJjX4J7HY4VPPU4O3qAqiRdqJHyStCjlwOmvem2vPTWYQ3vJuFElmB6ZWa7lvJUP2b0NTfUcLVttBIDhuWbbWTbixPHMH8OgILlJerGmcM8B9%2BQyhiTXRmJAX9hwUnnxZ0kEMagv0HGnhrOhcqBdQE%2BfzhZKqlPkXqU4fMhKyzty5BHLbL0RYIS9gM%2BJkPzBqcsSMtwY0e0VxrM7iIH3kojAADUsRNS%2FXRa5iQqOvpaVvxhFKDr%2BNz0BHlprwFx7U%2F%2Fj%2BjzkeG2lEF3ZIS4%2BXcKxy9JdUsYI%2Btw1%2Fz4UdPTbb7mjF2ocBQfToeA%2BidggiKwr6GK%2FETJfdgrNGSvRyGkP%2BzuOQXUsE3uRYnaBWW7sTfMdJaZS%2FYW47N%2BhlJg%2FZY8aWhBcQkgtFejZe176yJNucmPn%2FW%2FLA%2BEqM8KQ1ccs9r2DkxTw2vLOXtCup6Dfy5UgCNn1%2FNDTfL5bTcxIPLyfx3%2Bob8%2FYJfj1iLJNNAtqrIgCK5NWmsM1G7j%2FDCwk%2BkMBf9Z2GfNqRsvp3ExP%2BmSYj88c1WPnut%2BpQLkuZsxwjrAzO9h6Yu3z6yGzbmwAb5KguU9dm60jaQaUGCGdnKBp6RHHYcCNPd1fAMYHE8INqvknzt%2BbLaQ75sTd7YingAc1EX%2BK%2F0tyZI48qfzMqrwpUm2TFS7tpAeM7a%2BxjarrgyVeQwoCZAaVr%2F%2F1ARSf9wu%2BGFrDNvUVhdV8ZxYEeD%2Ft7mD3XWRhK2akmGgEReRBS6L%2BXpEs8BG493p5NinaxIpLLZnlO77RlG%2FVo%2FMO2MeCGYqwXCMBq%2FSHy92oBVHzLP0%2Fx7izhG3SmZ5KUbE4s5%2Bv%2FvSf%2BK50UpKNbGzk0KR5oBdriwl3KcUgqpkl5x9SGMWcDOijpoCH8kTrPoc%2BmQLYZOWhA2l4a7tr66jA%2BaobL89Yq%2BPenlOl4bTBlMN6m2GZkGZMGy7c8Hx3fSk5Xb95nvDVEnsvw9uhByJjLuiufyP%2BP8V9bIDeglYyc0oNjmGi69PO7EimgUCzP4tSuEZ%2Bk%2Fsgy%2FG8uvpUDJxoebcMMlqeimPyllB0cqNO%2BNV5I6rNBZ%2Fc5%2F7Y3uqyIXvAqh1LLxz0SeTBa1oQUWIHIMGst66P50KJoqWh5pYyCcfRmRpzP5aJhxb2N%2BFfvP1hs0P%2B5h%2Fry51MOcoYrR8xv27gBOTkKYLtE6SSHZ1XPi%2FtI1SOtU6hrAVab2pQHdXnXcovtnEr3SAMBIvg56C8%2FBqBY%2FMsIJiqAoHVl49PQz60thSkrChflu7rBTIYxOHOmK8iWhKvg6q8y5SacX5ieiVRpqv44B73V6MQtscjpPDCiD8TgaQUznT0eYwGU%2FZr3ihO7VLTk%2FlpZgx8q21Xmf4n9wd5HgMpoHhdf6i5aYxdacQxsONu7rNfMjz8HxuwNXwHb7eXtfabEvccFacyQ%3D%3D)。 气泡框中的input内容:{{ inputValue }} 鼠标悬停后打开气泡,并且自动聚焦内部输入框 import { ref } from 'vue' import myPopover from './my-popover.vue'; const inputValue = ref('') const elInputRef = ref(null) const handlePopoverOpen = () => { elInputRef.value.focus() }