首页 > 其他分享 >Vue3中页面不能根据props数据动态变化怎么办?

Vue3中页面不能根据props数据动态变化怎么办?

时间:2022-12-25 23:33:56浏览次数:50  
标签:Vue3 default xAxisData 动态变化 toRefs props Array type

解决方法:使用toRefs结构,使其具有响应式,再使用!

import { reactive, defineProps, toRefs } from 'vue';

const props = defineProps({
  xAxisData: {
    type: Array,
    default: []
  },
  seriesDataEveryDay: {
    type: Array,
    default: []
  },
  seriesDataGu: {
    type: Array,
    default: []
  },
  seriesDataPing: {
    type: Array,
    default: []
  },
  seriesDataFeng: {
    type: Array,
    default: []
  },
  seriesDataHuan: {
    type: Array,
    default: []
  },
  graphicText: {
    type: String,
    default: ''
  }
});

// 使用toRefs结构,使其具有响应式
const { xAxisData, seriesDataEveryDay, seriesDataGu, seriesDataPing, seriesDataFeng, seriesDataHuan, graphicText } = toRefs(props);

 

标签:Vue3,default,xAxisData,动态变化,toRefs,props,Array,type
From: https://www.cnblogs.com/suihung/p/17004855.html

相关文章

  • Jeecgboot-Vue3 v1.2.0 版本正式发布,企业级低代码平台
    项目介绍Jeecgboot-Vue3采用Vue3.0、Vite、Ant-Design-Vue、TypeScript等新技术方案,包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。Je......
  • vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求
    最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把......
  • vue3的setup函数的使用
     setup的使用:1.setup函数时,它将接受两个参数:(props、context(包含attrs、slots、emit))context包含三个参数,可通过解构方式写context该上下文对象是非响应式的,可以安......
  • vue3 ref 传参
    1 子组件Demo里:<scriptsetup>import{ref}from'vue'letceshi=ref(520)defineExpose({//通过defineExpose将子组件内部数据暴露给父组件!!!!c......
  • 组件间通信-props
    Props功能让组件接收外部传过来的数据传递数据<Demoname="xxx"/>接收数据  1.第一种方式(只接收):props:['name']  2.第二种方式(限制类型):pr......
  • vue3 组件传参
    父传子父组件绑定传参(:img_type="img_type")不绑定只能传字符串import{defineProps}from'vue'letprops=defineProps({//子组件接收父组件传递过来的值......
  • Vue2和Vue3使用vue-print-nb实现打印功
    Vue2和Vue3使用vue-print-nb实现打印功Vue2使用vue-print-nb实现打印功Vue3使用vue3-print-nb实现打印功Vue2Vue2.0版本安装方法:npminstallvue-print-nb--save/......
  • vue3使用composables来取代mixins 来状态复用
    前言最简单理解composables的方式就是将其视为vue版的自定义hooks来个demo比如页面初始化的时候我需要请求接口获取数据并回填至表单以前的做法src/pages/index.......
  • VUE3状态管理Pinia使用介绍
    vue3中推荐使用的状态管理工具:pinia,真的很好用官方文档,中文文档一、安装piniayarnaddpinia#或者使用npmnpminstallpinia二、src文件夹下新建store文件夹,并新建......
  • Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
    app.component.html <app-in-out[in]='"传输进入"'(out)="out($event)"></app-in-out>app.component.tsimport{Component}from'@angular/core';@Component({sele......