vue2.0 父组件给子组件传递数据的方法
发布网友
发布时间：2022-04-22 04:27
共2个回答
懂视网
时间：2022-04-20 02:45
问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常
原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据
解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染
//父组件
<p class="chart-wrapper">
<pie-chart v-if="flag" :pie-data="piedata"></pie-chart>
</p> ...
export default {
name: 'device',
data() { return {
flag:false,
piedata:{}, ...
},
created(){
this.init()
},
methods:{
init(){
axios.get('/static/mock/status/pie.json').then(this.getInfoSucc)
},
getInfoSucc(res){
res = res.data; if(res.code ==0){
const values = res.values;
this.piedata = values.piedata;
this.flag = true
}
}//子组件<template>
<p :class="className" :style="{height:height,width:width}"></p></template><script>import echarts from 'echarts'require('echarts/theme/macarons') // echarts themeimport { debounce } from '@/utils'export default {
props: {
pieData: {
type: Object
},
msg: {
type:Number
},
className: {
type: String, default: 'chart'
},
width: {
type: String, default: '100%'
},
height: {
type: String, default: '300px'
}
},
data() { return {
chart: null
}
}, // watch: {
// piedata: {
// deep: true,
// handler(val) {
// console.log(val)
// this.setOptions(val)
// }
// }
// },
mounted() {
console.log("pieData:"+JSON.stringify(this.pieData)) this.initChart() this.__resizeHanlder = debounce(() => { if (this.chart) { this.chart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder)
},
beforeDestroy() { if (!this.chart) { return
}
window.removeEventListener('resize', this.__resizeHanlder) this.chart.dispose() this.chart = null
},
methods: {
setOptions({ text, arrtype, arrdata } = {}) {
this.chart.setOption({
title: {
text: text
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
data: arrtype
},
calculable: true,
series: [
{
name: '',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '42%'],
data: arrdata,
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
},
initChart() { this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.pieData);
}
}
}</script>然后子组件就能正常显示了 
本文讲解了vue中父组件向子组件echarts传值问题 ，更多相关内容请关注Gxl网。
热心网友
时间：2022-04-19 23:53
在父组件
App.vue
中引用子组件
A.vue，把
name
的值传给
A
组件。
1、安装
在桌面新建一个文件夹
$
cd
到文件中
$
npm
install
-g
vue-cli
$
vue
init
webpack
.
$
npm
install
$
npm
run
dev
vue
init
webpack
.
之后的选择解释
2、删除
1、删除App中的一些内容如下
2、删除components文件中的HelloWorld.vue
3、修改
修改App.vue
如下：
<template>
<div
id="app">
//
message
定义在子组件的
props
中
<A
v-bind:message="name"/>
</div>
</template>
<script>
import
A
from
'./components/A'
export
default
{
name:
'App',
components:
{
A
},
data(){
return{
name:"我就是数据啊"
}
}
}
</script>
4、新建
在components新建A.vue并写入内容如下：
<template>
<div>{{message}}</div>
</template>
<script>
export
default
{
props:
['message']
//接受message传过来的数据
}
</script>
5、最后
在命令行输入
$
npm
run
dev
总结
以上所述是小编给大家介绍的vue2.0
父组件给子组件传递数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:vue父组件向子组件(props)传递数据的方法vue组件Prop传递数据的实现示例vue中各组件之间传递数据的方法示例vue.js组件之间传递数据的方法vue子组件使用自定义事件向父组件传递数据Vue2.x中的父组件传递数据至子组件的方法vuejs动态组件给子组件传递数据的方法详解
