首页 > 其他分享 >vue3 中 props 传递响应式值不会变

vue3 中 props 传递响应式值不会变

时间:2023-08-15 15:23:10浏览次数:28  
标签:status const props 传递 响应 vue3

vue3 中 通过 props 传递响应式值不会跟着响应式,原因为获取 props 的时候 直接通过 props.xxx 来获取了,如果要保持响应式,需要手动转为响应式

const { status } = toRefs(props)

// or

const status = toRef(props, 'status')

当组件层级比较深的时候,为避免 props 多级传递,可以使用 provide, inject,注意,如果要保证传递的数据为响应式,要直接传响应式数据,而不是最终获取的值

// 父组件
const status = ref(0)
provide('status', status)

// 子组件
const status = inject('status')

 

标签:status,const,props,传递,响应,vue3
From: https://www.cnblogs.com/beileixinqing/p/17631381.html

相关文章

  • Vue3 setup的业务逻辑分离功能拆分
    在Vue3开发中,我们可能遇到一个页面或者组件业务逻辑很复杂,代码量达到千行,不利于阅读和维护,因此需要将业务逻辑进行分离首页主界面index.vue//index.vue<script>import{reactive,toRefs}from'vue'importuseOperatefrom'./useOperate.js'importuseConfi......
  • HTTP基础:学习HTTP协议的基本知识,了解请求和响应的过程
    HTTP(HypertextTransferProtocol,超文本传输协议)是一种用于传输超媒体文档(如HTML)的应用层协议,它是Web中最基本的协议。HTTP请求和响应都是由客户端和服务器之间进行的。一个完整的HTTP请求由以下几个部分组成:请求行:包括请求方法(GET、POST等)、请求的URI和HTTP协议的版本号。请......
  • vue3 使用 vue-i18n 配置多语言环境
    1.插件地址:VueI18n官方文档GitHub地址2.安装:在Vue之后引入vue-i18n,它会自动安装:<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>NPM:npminstallv......
  • Vue3 中的v-model实现父子组件数据同步通信
    v-model在vue2中也就是双向绑定作用,但是在vue3中除了实现双向绑定外,还可以进行组件的通信父子组件的数据同步,接下来看看例子:<template><h1>{{num}}</h1><child-eventv-model="num"></child-event></template><scriptlang="ts"setup......
  • [完结8章]程序员的 AI 启蒙课,ChatGPT 辅助开发 Vue3 项目
    点击下载:程序员的AI启蒙课:ChatGPT让你1人顶3人提取码:8zwd Vue是一款用于构建用户界面的JavaScript框,它基于标准的HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,用以帮助开发者高效地开发用户界面。目前,Vue3.0正式版也发布了两年的时间,越......
  • vue3+typescript中的props
     以上是子组件 以上是父组件<scriptsetuplangs="ts">letprops=defineProps(['info','money'])//父子组件的通信需要用到defineProps方法去接受父组件想要传递的数据console.info(props)</script>需要注意的就是:props可以实现父子组件的通信,但是props的......
  • Spring 响应式编程-读书笔记
    本文为《Spring响应式编程》的读书笔记,响应式技术栈可以创建极其高效、易于获取且具有回弹性的端点,同时响应式可以容忍网络延迟,并以影响较小的方式处理故障。响应式微服务还可以隔离慢速事务并加速速度最快的事务。通过本书可以学到以下内容:响应式编程基本原则和响应式流(Reactive......
  • vue2和vue3中插槽写法区别
    一、slot是什么在HTML中slot元素,作为WebComponents技术套件的一部分,是Web组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充。(我们可以理解为solt在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承......
  • Palo Alto Cortex XSOAR 6.11 (Linux) - 安全编排、自动化和响应 (SOAR) 平台
    PaloAltoCortexXSOAR6.11(Linux)-安全编排、自动化和响应(SOAR)平台SecurityOrchestration,AutomationandResponse(SOAR)platform请访问原文链接:https://sysin.org/blog/cortex-xsoar-6/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org重新定义安全......
  • Spring Boot + Vue3前后端分离实战wiki知识库系统<十二>--用户管理&单点登录开发一
    目标:在上一次https://www.cnblogs.com/webor2006/p/17533745.html我们已经完成了文档管理的功能模块开发,接下来则开启新模块的学习---用户登录,这块还是有不少知识点值得学习的,先来看一下整体的效果,关于效果官网有一个体验地址:wiki.courseimooc.com,如下:其效果也是人人熟知的,下面......