vue:使用父组件通过props传到子组件的值

news/2024/7/10 1:51:07 标签: html, html5, javascript, vue
htmledit_views">

1、首先,我们要在父组件中给子组件的props赋值

 如果子组件只是需要在template里显示一下传过来的值,直接用{{}}就可以了。

 但是,如果需要在script里使用传过来的值,(也就是我们要用到this啦)那么在父组件中赋值的时候就必须精确到属性一一赋值,如下图。

 然后在子组件的我们再定义一个变量,在watch里来接收传过来的值,并且这个新变量只有在watch里才有效!(this.initChart();原来是放在mounted里面调用的,这时候要移到watch里去,因为我在initChart()里面用到了传递过来的值)。

参考博客:

vue组件props传值,对象获取不到的问题 - 掘金

https://www.jb51.net/article/199186.htmhtml/release1.9.5/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=LA92" />https://www.jb51.net/article/199186.htm


http://www.niftyadmin.cn/n/1231202.html

相关文章

JavaScript:使用slice(0)复制数组

本来avgX里只有25个数据,为了不污染avgX,我们使用了中间变量arr,然后在arr里添加了5个数据,打印原数组的时候会惊奇地发现avgX也变成了30个数据!这是因为数组之类引用数据类型,如果直接相等,相等…

ant design vue:表头合并

x1-x8一共是8列,需要合并成一列,把x1的colSpan设置为8,x2-x8的colSpan设置为0。 columns: [{title: 日期,dataIndex: date,key: date},{title: 批次号,dataIndex: batchNo,key: batchNo},{title: 测量数据,dataIndex: x1,key: x1,colSpan: …

JavaScript:二维数组行和列互换

transfer(oldArr) { const newArr oldArr[0].map((col, i) > oldArr.map(row > row[i])); return newArr; }

JavaScript:把数组变成对象,添加动态key

<template><div>把数组变成对象&#xff0c;添加动态key</div></template><script>export default {name: "",props: {dataSource: {}}, data() {return {data1:[11,22,33,44,55,66,77,88],data2:{}}},created() {},mounted() {this.d…

JavaScript:向上取整和向下取整

var min Math.floor(min);var max Math.ceil(max); 向上取整和向下取整&#xff0c;在echarts中用来设置Y轴的min和max非常有用&#xff0c;虽然我们用scale:true也能脱离 0 值比例&#xff0c;但是如果遇到Y轴的最大值和最小值非整数&#xff0c;显示上就不够美观&#xff…

JavaScript:如何求一个数组的最大值和最小值?

var min Math.min.apply(Math, array); var max Math.max.apply(Math, array);

supermap:在vue项目里使用leaflet的环境准备

leaflet是地图组件&#xff08;官网全英文&#xff09;&#xff0c;supermap将其封装得更为强大&#xff0c;我使用的是封装后的SuperMap iClient for Leaflet。 1、安装SuperMap iClient for Leaflet 执行命令&#xff1a;npm install supermap/iclient-leaflet 2、安装依赖…

vue:在main.js中全局引用css的方法及坑(转载)

步骤&#xff1a; 1、配置文件webpack.config.js&#xff1a; { test:/\.css$/, loader:style-loader!css-loader } 坑1&#xff1a;-loader尾缀 坑2&#xff1a;Module build failed: Unknown word 模块创建失败&#xff1a;未知文字&#xff1f;&#xff1f;&#xff1f;&am…