vue.js 3 . value.click不是函数

9ceoxa92 于 2023-01-05 发布在 Vue.js

关注(0)|答案(3)|浏览(226)

<template>
            <RecyclablesPopup ref="LVP" class="inline-block m-5px"></RecyclablesPopup>
    </template>

    <script setup>
    import RecyclablesPopup from "../components/popups/RecyclablesPopup";
    import { ref } from 'vue';
    const LVP = ref(null);

    // ... after mounted I have an event with a legacy component and onclick handler:
    eventClick: function(calEvent)
        {
            console.log(LVP.value);
            LVP.value.click();
        }
    </script>

最后，单击后得到Uncaught TypeError: LVP.value.click is not a function。
console.log按预期返回代理对象Proxy { <target>: Proxy, <handler>: {…} }
为什么我不能调用click()？

vue.js

来源：https://stackoverflow.com/questions/72938206/vue-js-3-value-click-is-not-a-function

3条答案

按热度按时间

lnlaulya1#

click函数应该由子组件公开，以便由父组件访问：

可回收弹出组件

<script setup>

function click(){
  //.......
}
defineExpose({
 click
})
</script>

有关详细信息，请访问https://vuejs.org/guide/essentials/template-refs.html#ref-on-component

赞(0）回复(0）举报 2023-01-05

4szc88ey2#

如果您正在使用**脚本设置 *,，则无法访问在引用组件内定义的函数、变量等。要更改此设置，必须使用 RecyclablesPopup 组件内的 defineExpose 编译器宏-请查看文档中的详细信息

//inside RecyclablesPopup
<script setup>
import { ref } from 'vue'

const click = () => {
    //do something
}

defineExpose({
    click,
})
</script>

赞(0）回复(0）举报 2023-01-05

zujrkrfu3#

您需要在onMounted生命周期中执行该函数，以保证组件被挂载到DOM，因为组件挂载之前的值是未定义的。