Templates Vue3 TypeError:模板引用值为null

如何清除控制台中的以下错误：

TypeError:ref.value为空

该错误仅与调整大小事件一起出现。每次调整窗口大小时，我都会渲染图表。因此，错误消息会一次又一次出现。文档显示模板ref也使用空值初始化。所以我必须在初始化之后做一些事情，对吗

这是我的密码：

// ... //关于调整大小 导出常量chartRef=refnull 导出函数createChart{ const ctx=chartRef.value.getContext'2d' 如果ctx！==null{//修复我 获取维度 drawChartctx } } // ... 如何清理控制台，使错误消息不再出现？Thx.

选项A 用试一试的方式来包装它

选择2 使用手表

我发现最好的办法就是用手表

下面是一个可以在多个组件之间重用的函数示例。我们可以定义一个函数，该函数生成canvas引用，然后可以将该引用传递给组件-canvasRef

const with canvasref==>{ 让onMountCallback=null； const onMount=回调=>{ onMountCallback=回调； }; const canvasRef=refnull； watchcanvasRef，元素，prevElement=>{ HtmlCanvaElement的if元素实例{ canvasRef.value=元素； 如果onMountCallback&&preveElement==null onMountCallbackcanvasRef； }否则{ ctxRef.value=null； } }; 返回{ 拉票， 山上 }; }; 然后我们可以在组件中获取canvasRef并将其传递给元素。我们还可以使用函数返回的onmountedhook来处理初始渲染

app.componentmy-line-chart{ 设置：道具=>{ const{canvasRef，onMount}=withCanvasRef； 常量绘制==>{ //这里的东西， //如果有条件渲染，请检查canvasRef.value }; //关于调整大小 window.addEventListenerresize，=>draw； //帆布挂载 onMount=>draw； 返回{canvasRef}； }, 模板：`` }; 见示例选项A 用试一试的方式来包装它

选择2 使用手表

我发现最好的办法就是用手表

下面是一个可以在多个组件之间重用的函数示例。我们可以定义一个函数，该函数生成canvas引用，然后可以将该引用传递给组件-canvasRef

const with canvasref==>{ 让onMountCallback=null； const onMount=回调=>{ onMountCallback=回调； }; const canvasRef=refnull； watchcanvasRef，元素，prevElement=>{ HtmlCanvaElement的if元素实例{ canvasRef.value=元素； 如果onMountCallback&&preveElement==null onMountCallbackcanvasRef； }否则{ ctxRef.value=null； } }; 返回{ 拉票， 山上 }; }; 然后我们可以在组件中获取canvasRef并将其传递给元素。我们还可以使用函数返回的onmountedhook来处理初始渲染

app.componentmy-line-chart{ 设置：道具=>{ const{canvasRef，onMount}=withCanvasRef； 常量绘制==>{ //这里的东西， //如果有条件渲染，请检查canvasRef.value }; //关于调整大小 window.addEventListenerresize，=>draw； //帆布挂载 onMount=>draw； 返回{canvasRef}； }, 模板：`` };

---

参见示例我有点晚了，但我在Vue 3中遇到了同样的问题。我通过返回引用解决了juste：

从“vue”导入{onMounted，ref} 导出默认值{ 设置{ const myinput=refnull//将dom对象引用分配给myinput变量 onMounted=>{ console.logmyinput.value//在控制台中记录DOM对象 } 返回{myinput}//如果没有此选项将无法工作 } }

---

我有点晚了，但我在VUE3上也遇到了同样的问题。我通过返回引用解决了juste：

从“vue”导入{onMounted，ref} 导出默认值{ 设置{ const myinput=refnull//将dom对象引用分配给myinput变量 onMounted=>{ console.logmyinput.value//在控制台中记录DOM对象 } 返回{myinput}//如果没有此选项将无法工作 } }

---

你在哪里调用createChart？一旦加载，然后我为每次调整添加一个eventlistener，去盎司为250ms。你是否在没有这种糖分语法的情况下尝试过它？不，在我的项目中，这个是必不可少的。但这是实验性的，它可能会改变你在哪里调用createChart？一旦安装，然后我为每个调整添加一个eventlistener，去抖动为250ms。你在没有这种糖分语法的情况下尝试过吗？不，在我的项目中是必不可少的。没有它是不行的。但这是实验性的，它可以改变。谢谢，它看起来真的很有希望。我要试一试。如果需要一点时间，我很抱歉。谢谢，看起来很有希望。我要试一试。如果需要一点时间，我很抱歉。嗨，谢谢你

---

你的答案是。不幸的是，我使用的是实验脚本设置版本。您好，谢谢您的回答。不幸的是，我使用的是实验脚本设置版本。