vue组件另一种传值

我们经常用的组件传值

1、父子组件props传值

2、vuex

如果有2个动态组件，一个是视图一个是参数配置，修改参数配置视图更新，这种情况可以使用父组件触发子组件事件，把对象数据传过去

一个页面左边的视图组件

代码语言：javascript复制

<component :is="currentAddPrevComponent" :propValue="propValue"  :colorPropOptions="colorPropOptions"></component>

右边的编辑组件

代码语言：javascript复制

<component ref="edit" :is="currentEditeComponent"></component>

他们共享颜色colorPropOptions，右边颜色变化，左边视图变化，通过下面的方式传值

代码语言：javascript复制

this.$refs.edit.init(this.colorPropOptions)

如果this.$refs.edit 还没有创建成功需要等创建完成后

代码语言：javascript复制

          this.$nextTick(()=>{
             console.log(this.$refs.edit)
             this.$refs.edit.init(this.colorPropOptions)             
          })

图表视图组件

代码语言：javascript复制

<template>
  <highcharts
    :options="chartOptions1"
    style="width: 100%; margin-bottom: 10px; height: 250px"
  ></highcharts>
</template>

<script>
export default {
  props: {
    propValue: Object,
    colorPropOptions: {
      type: Array,
      default: ()=>[
        "#9678da",
        "#05a7f2",
        "#46aead",
        "#f39c12",
        "#564fac",
        "#2fcb78"
      ],
    },
  },
  data() {
    return {
      chartOptions1: {
        colors: this.colorPropOptions,
        chart: {
          type: "column",
        },
        title: {
          text: null,
        },
        xAxis: {
          // categories: ["5-1","5-2","5-3","5-4","5-5","5-6"],
          // categories: this.propValue.categories,
          categories: [],
          crosshair: true,
          gridLineWidth: 1,
          labels: {
            style: {
              fontSize: "14px",
            },
          },
        },
        yAxis: {
          title: {
            text: null,
          },
          lineWidth: 1,
        },

        tooltip: {
          valueSuffix: " Nm³",
          shared: true,
        },
        legend: {
          align: "right",
          verticalAlign: "top",
          y: 0,
          margin: 0,
        },
        plotOptions: {
          spline: {
            marker: { enabled: false },
          },
          column: {
            stacking: "normal",
          },
        },
        series: [
          { name: "name1", data: [5, 5, 5, 5, 5, 5] },
          { name: "name2", data: [11.06, 11.06, 11.06, 11.06, 11.06, 11.06] },
        
        ],
      },
    };
  },
  mounted() {
    console.log(this.chartOptions1.xAxis.categories);
    console.log("item2 mounted");
  },
  watch: {
    propValue: {
      handler(newValue) {
        console.log("watch change");
        console.log(newValue);
        this.chartOptions1.xAxis.categories = newValue.categories;
      },
      //  deep:true,
      immediate: true,
    },
    colorPropOptions(newValue){
      console.log(newValue)
      this.chartOptions1.colors = newValue 
    }
  },
  methods: {},
};
</script>

<style>
</style>

编辑组件

代码语言：javascript复制

<template>
<div>
  <el-color-picker v-for="(item,index) in colorPropOptions" :key="index" v-model="colors[index]"></el-color-picker>
  
</div>  
</template>

<script>
export default {
  props:{editPropOption:Object},
  data() {
    return {
      colorPropOptions:null,
      colors:[],
    };
  },
  mounted(){
 
  },
  methods: {
  init(colorPropOptions){
     this.colorPropOptions = colorPropOptions
     this.colors = colorPropOptions
  }
  },
  watch:{
    // colors(newValue){
    //   console.log(newValue)
    //   this.chartOption.colors = newValue
    //   this.$emit("chageOption",this.chartOption.colors)
    // }
  }
};
</script>

<style>
</style>

这样修改编辑组件的颜色，左边视图变化

edit vuex 事件 图表

0 人点赞