【Vue】子组件监听父页面值得变化

效果图

其中环装图为子组件，滑块为父页面元素

目录

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import echarts from 'echarts'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$echarts=echarts;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

组件MyChart.vue

<template>
  <div class="my-chart" ref="chart">

  </div>
</template>

<script>
    export default {
        name: "MyChart",
        mounted() {

            this.myChart = this.$echarts.init(this.$refs.chart);
            this.changeChart();
        },
        data() {
            return {
                myChart: null
            }
        },
        methods: {
            changeChart() {
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        show: false
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },

                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: this.a, name: 'A'},
                                {value: this.b, name: 'B'},
                                {value: this.c, name: 'C'},
                                {value: this.d, name: 'D'},
                            ]
                        }
                    ]
                };
                this.myChart.setOption(option);
            }
        },
        props: ["a", 'b', 'c', 'd'],
        watch: {
            a(oldValue, newValue) {
                this.changeChart();
            },
            b(oldValue, newValue) {
                this.changeChart();
            },
            c(oldValue, newValue) {
                this.changeChart();
            },
            d(oldValue, newValue) {
                this.changeChart();
            }
        }
    }
</script>

<style scoped>
  .my-chart {
    width: 100%;
    height: 100%;
  }
</style>

父页面HelloWorld.vue

<template>
  <div class="hello">
    <div>
      <div>A
        <div>
          <el-slider v-model="a"></el-slider>
        </div>
      </div>
      <div>B
        <div>
          <el-slider v-model="b"></el-slider>
        </div>
      </div>
      <div>C
        <div>
          <el-slider v-model="c"></el-slider>
        </div>
      </div>
      <div>D
        <div>
          <el-slider v-model="d"></el-slider>
        </div>
      </div>
    </div>
    <div>
      <div v-for="item in 5" :key="item">
        <my-chart :a="a" :b="b" :c="c" :d="d"></my-chart>
      </div>
    </div>
  </div>
</template>

<script>
    import MyChart from "./MyChart";

    export default {
        name: 'HelloWorld',
        components: {MyChart},
        data() {
            return {
                a: 10,
                b: 10,
                c: 10,
                d: 10
            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello > div {
    display: flex;
  }

  .hello > div:nth-child(1) > div {
    display: flex;
    align-items: center;
    margin-left: 50px;
  }

  .hello > div:nth-child(1) > div > div {
    width: 200px;
    margin-left: 20px;
  }

  .hello > div:nth-child(2) {
    height: 200px;
  }

  .hello > div:nth-child(2) > div {
    width: 200px;
  }
</style>