解决vue3父组件执行子组件方法报错:TypeError: Cannot read properties of null

现象:

 父组件执行子组件的代码:

 原因: Vue3使用的所有变量除了来自父组件传值的props以外,其他的html绑定的所有本地变量都必须通过return导出!

这一点是vue3 最坑爹的一点。很容易忘记。

解决办法:使用toRefs解构state属性,并通过return导出

return {

...toRefs(state)  // 这句是关键,否则会报错Uncaught TypeError: Cannot read properties of null

}

但是这没完!

如果你通过.value获取ref对象,此时还是会报错:TypeError: Cannot read properties of null

为什么因为:通过toRefs解构出来的对象,不再需要.value获取值了!

toRefs 会将 ref 对象中的 .value 自动解构出来因此你无需再使用 .value 来获取值。一旦使用 toRefs 解构,你可以直接访问属性的值。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/117696.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何在苹果Mac系统设置中查看Wi-Fi密码?

在 Mac 上查找保存的 Wi-Fi 密码的最简单方法之一是从系统设置内的高级 Wi-Fi 首选项页面。您可以通过下面的方式访问此页面来查找您保存的 Wi-Fi 密码。 1.在 Mac 上,选取「苹果菜单」选择「系统设置」。 2.从侧边栏中选择「Wi-Fi」,单击「高级」。 3.…

小程序如何设置自动预约快递

小程序通过设置自动预约功能,可以实现自动将订单信息发送给快递公司,快递公司可以自动上门取件。下面具体介绍如何设置。 在小程序管理员后台->配送设置处,选择首选配送公司。为了能够支持自动预约快递,请选择正常的快递公司&…

【Nuxt】Nuxt3 中使用 swiper 并自动滑动、手动滑动、点击滑动

demo 示例 建议先看官网 nuxt-swiper .vue 文件中使用 样式请根据你项目实际来,只展示基础配置 import { Swiper, SwiperSlide } from swiper/vue import { Autoplay } from swiper/modules import swiper/css let useSwiper: any null // swiper实例 // 初始…

【ML】分类问题

分类问题 classification:根据已知样本特征,判断输入样本属于哪种已知样本类。 常用入门案例:垃圾邮件检测、图像分类、手写数字识别、考试通过预测。 分类问题和回归问题的明显区别: 分类问题的结果是非连续型标签&#xff0c…

STM32:I²C通信原理概要

一、IIC通信原理 IIC通信和串口通信有一定的相似之处,都有一根共地线和两根数据线。但是传递外部信息,串口有两根数据线可以进行双向通信,也就是全双工通信。而在IIC通信下,其中一条数据线是用于提供同步时钟脉冲的时钟线(SCL)&am…

oracle-sql语句执行过程

客户端输入sql语句。 sql语句通过网络到达数据库实例。 服务器进程(server process)接收到sql语句。 sql – 解析成执行计划,然后sql才能执行。 会将sql和sql的执行计划缓存到共享池中。解析: 会消耗很多资源。 从数据库找数据,先从buffer cache中找&a…

STM32F4X SDIO(六) 例程讲解-SD_PowerON

STM32F4X SDIO(六) 例程讲解-SD_PowerON 例程讲解-SD_PowerONSDIO引脚初始化和时钟初始化SDIO初始化(单线模式)CMD0:GO_IDLE_STATE命令发送程序命令响应程序 CMD8:SEND_IF_CONDCMD8参数命令发送程序命令响应程序 CMD55:APP_CMDCMD55命令参数命令发送命令…

前端框架Vue学习 ——(二)Vue常用指令

文章目录 常用指令 常用指令 指令: HTML 标签上带有 “v-” 前缀的特殊属性&#xff0c;不同指令具有不同含义。例如: v-if, v-for… 常用指令&#xff1a; v-bind&#xff1a;为 HTML 标签绑定属性值&#xff0c;如设置 href&#xff0c;css 样式等 <a v-bind:href"…

包装印刷行业万界星空科技云MES解决方案

印刷业的机械化程度在国内制造行业内算是比较高的&#xff0c;不算是劳动密集型企业。如书本的装订、包装的模切、烫金、糊盒等都已经有了全自动设备。印刷厂除了部分手工必须采用人工外&#xff0c;大部分都可以采用机器&#xff0c;也就意味着可以由少量工人生产出大量产品。…

CTF工具PDF隐写神器wbStego4open安装和详细使用方法

wbStego4open安装和详细使用方法 1.wbStego4open介绍&#xff1a;2.wbStego4open下载&#xff1a;3.wbStego4open原理图&#xff1a;4.wbStego4open使用教程&#xff1a;第一步&#xff1a;第二步&#xff1a;第三步&#xff1a;第四步&#xff1a;第五步&#xff1a; 5.wbSteg…

创建日期时间类型对象 pendulum.datetime()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 创建日期时间类型对象 pendulum.datetime() 选择题 请问pdl.datetime(2023,10,1,12,0,0)的结果是&#xff1a; import pendulum as pdl print("【执行】pdl.datetime(2023,10,1)") …

最新知识付费变现小程序源码/独立后台知识付费小程序源码/修复登录接口

最新知识付费变现小程序源码&#xff0c;独立后台知识付费小程序源码&#xff0c;最新版修复登录接口。 主要功能 会员系统&#xff0c;用户登录/注册购买记录 收藏记录 基本设置 后台控制导航颜色 字体颜色 标题等设置 流量主广告开关小程序广告显示隐藏 广告主审核过审核…

使用Nokogiri库的Python程序

python import requests from bs4 import BeautifulSoup import os # 设置 proxies {"http": "", "https": ""} # 设置headers headers { User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (K…

[极客大挑战 2019]HardSQL1

提示(最后有我自用的字典, 需要可以自取) 空格等号绕过报错查询当显示不全时left(), right(), substr(), 拿到题目以后直接fuzz 这里发现过滤了 空格以及空格的变式/**/ union 但是updatexml还在还可以使用报错注入, 空格可以用()代替, 而则可以用like代替 payload: …

IntelliJ IDEA 2022创建Maven项目

IntelliJ IDEA 2022创建Maven项目 点击New Project 配置一下下 (1). 选择Maven Archetype (2). 输入Name就是你的项目名称 (3). 输入Location是你的项目保存目录 (4). 选择JDK (5). 选择Catalog一般默认选择Internal即可 在Archetype这里我们选择一个模板来创建Maven项目 …

【蓝桥杯选拔赛真题08】C++最大值最小值平均值 青少年组蓝桥杯C++选拔赛真题 STEMA比赛真题解析

目录 C/C++最大值最小值平均值 一、题目要求 1、编程实现 2、输入输出 二、算法分析</

GraphQL入门与开源的GraphQL引擎Hasura体验

背景 Hasura 是一个开源的 GraphQL 引擎&#xff0c;它可以帮助开发人员快速构建和部署现代应用程序的后端。它提供了一个自动化的 GraphQL API &#xff0c;可以直接连接到现有的数据库&#xff0c;并提供实时数据推送和订阅功能。 Hasura 团队总部位于印度。 下载安装 脚本…

VScode + opencv + c++ + win配置教程

准备&#xff1a; 1、下载opencv 2、下载MinGw 3、 3、下载CMake 下载完解压放到一个文件夹里面&#xff0c;便于环境管理&#xff0c;文件夹我重命名了&#xff0c;解压出来文件名不一样正常 环境变量配置 C:\Users\wuxulong\cpp_env\MinGw\mingw64\bin C:\Users\wuxulon…

如何用PHP获取各大电商平台的数据

PHP获取API数据是指使用PHP语言从web服务中提取数据。API是指应用程序接口&#xff0c;它允许应用程序之间进行交互和通信&#xff0c;并且允许一个应用程序从另一个应用程序获取数据。PHP是一种网站开发语言&#xff0c;它可以使用多种方式来获取API数据。 在PHP中&#xff0…

【Python】批量下载素材酷视频资源

【需求】 做视频精彩需要用到梗图视频等,但是素材酷上面的视频没有搜索功能,每次用起来还要去下载也很麻烦,下载只能一个一个下载也很麻烦,下要搞一个能够批量下载的功能,然后把下载的资源全部放进万兴喵影编辑器的云空间,这样就可以做到随做随查随用了。 【效果】 目…