首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue组件另一种传值

vue组件另一种传值

作者头像
tianyawhl
发布2021-05-27 11:32:55
4070
发布2021-05-27 11:32:55
举报
文章被收录于专栏:前端之攻略前端之攻略

我们经常用的组件传值

1、父子组件props传值

2、vuex

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

一个页面左边的视图组件

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

右边的编辑组件

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

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

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

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

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

图表视图组件

<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>

编辑组件

<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>

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档