vue 子组件向父组件传值方法

发布网友发布时间：2022-04-24 04:39

共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

子组件注册触发事件，父组件注册
触发子组件事件后的方法写在method里面
父组件这么写
<component-a
v-on:child-say="listenToMyBoy"></component-a>
<p>Do
you
like
me?
{{childWords}}</p>
methods:
{
listenToMyBoy:
function
(somedata){
this.childWords
=
somedata
}
}
子组件component-a这么写
<button
v-on:click="onClickMe">like!</button>
methods:
{
onClickMe:
function(){
this.$emit('child-say',this.somedata);
}
}
以上这篇vue
子组件向父组件传值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue父组件向子组件动态传值的两种方法浅谈Vue父子组件和非父子组件传值问题Vue中父组件向子组件通信的方法vue2.0
父组件给子组件传递数据的方法