通过 $Emit 更新子组件和父组件数据答案

【问题标题】：Update son and father component data by $Emit通过 $Emit 更新子组件和父组件数据
【发布时间】：2021-01-15 19:02:14
【问题描述】：

我正在使用 apexcharts，我正在创建组件图形并传递另一个视图，我想知道如何通过 $emit 将数据从子组件图形更改为父亲？

我尝试按照文档进行操作，但它不起作用

    <div class="col-md-3" v-if="show">   
        <apexchart
        v-bind:chart1="chart1" 
        ref="chart1" 
        min-width="300"
        height="230"
        type="bar"
        :options="options" 
        v-on:update:series="series = $event"            
        ></apexchart>
     </div> 

 export default {
      name: "data-graf",
      components: {
         'apexchart': apexchart
    },
     props:{
       series: {
         type: Number
       }
     },

我将组件传递到这里

   <table class="data-table-2" style="min-width: 800px">
     <apexchart v-bind:series.sync="series"/>
  </table>

axios 数据

  this.$axios.get("/Op/Search", {params: {...params, arrayFormat: 'repeat'}})
    .then(res => {
      this.op = res.data
      this.$emit('update:series', op)
    })

【问题讨论】：

请提供minimal reproducible example。您发布的内容不能用于重现该错误。看起来您正在混合 *.sync 语法和 @update:* 语法。 *.sync 是 @update:* 语法的简写（更短的替换）。您要么使用其中一个。文档here.
这个问题在英语中没有意义，克里斯蒂安。你能改写一下吗？
所以如果我声明 series = [ this.data]，v-bind:series.sync="series" 是否已经捕获数据?

标签： javascript vue.js quasar-framework apexcharts

【解决方案1】：

使用.sync 或v-model 不会帮助您在series 更改时更新图表。

一目了然，Vue-ApexChart 是 ApexCharts 的一个非常基本的包装器。如果您提供反应性属性，它不会自动更新图表内容的基本方式。你必须自己调用更新方法。

这是通过在渲染图表的 DOM 元素上调用 updateSeries() 来完成的。

要获取 DOM 元素，请将 ref="chart" 放在 <apexchart> 上（可以随意命名，但您还需要在其余代码中将 $refs.chart 重命名为 $refs.someOtherName）。

在此之后，每当您更改系列时，您还必须在this.$refs.chart 上致电.updateSeries(/* newSeriesContents here */)。

我forked他们的一个演示沙箱并添加了一个tick()方法，我每4.2秒随机化一次图表值，给你一个更新示例。

如果您需要更多帮助，请告诉我。

【讨论】：