Vue2.0组件刷新之使用key刷新

vue组件刷新最简单最方便的方法就是使用key刷新

首先创建一个组件

这里我的组件写了个echarts的柱状图demo，感兴趣的朋友也可以去了解下echarts，这是个非常实用的数据可视化库哦！贴上我的代码

<template>
  <div id="columnar" style="height:450px;width:40%"></div>
</template>
<script>
let echarts = require("echarts");
export default {
  methods: {
    // 初始化柱状图
    init() {
      var data = this.data;
      var yMax = 20;
      var dataShadow = [];

      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      let myChart = echarts.init(document.getElementById("columnar"));
      var option = {
        tooltip: {
          trigger: "axis",
          formatter: "{a1}-{c1}",
          axisPointer:{
            lineStyle:{
              type:'dashed'
            }
          }
        },
        legend: {
          data: ["图示"],
          right: "8%",
          textStyle: {
            color: "white"
          },
        },
        xAxis: {
          data: data,
          axisLabel: {
            textStyle: {
              color: "#00C3F3"
            }
          },
          z: 10
        },
        yAxis: {
          name: "( 单位 )",
          nameTextStyle: {
            color: "#00C3F3"
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#00C3F3"
            }
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#093651"]
            }
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],
        series: [
          {
            // For shadow
            name: "shadow",
            type: "bar",
            itemStyle: {
              normal: { color: "RGBA(3,58,86,.5)" }
            },
            barGap: "-100%",
            barCategoryGap: "40%",
            data: dataShadow,
            animation: false
          },
          {
            name: "图示",
            type: "bar",
            itemStyle: {
              normal: {
                color: "#1CCEBF"
              }
            },
            data: data
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.init();
  },
  props:{
      data:{
          type:Array,
          default:()=>{
              return [];
          }
      }
  }
};
</script>

init函数里面是我初始化加载柱状图的逻辑，
mounted是页面初始化需要做什么的一个函数
props是可以用来当作页面传值的一个对象，在里面声明你要接受数据的对象和类型

然后创建一个展示的页面来引用组件

贴上我的代码

<template>
<div>
   <el-row>
    <test :data="testData" :key='key'/>
    <el-button @click="update">
        修改值
    </el-button>
  </el-row>
</div>
</template>
<script>
export default {
    name:"index",
    data(){
        return{
            testData:[1, 2, 3, 4, 5, 6, 7, 8, 9],
            key:''
        }
    },
    methods:{
        update(){
            for (let index = 0; index < this.testData.length; index++) {
                this.testData[index]=Math.round(Math.random()*10);
            }
            this.key=new Date().getTime();
        }
    },
    components:{
        test:()=>import("@/test/components/test")
    },
    mounted() {
    console.log("我进来了");
  },
}
</script>

components是用来引用组件的
:data=“testData” 是向组件传值（我们刚刚在组件里props定义了data对象）
:key='key’这是我们这一次的主角，我们首先定义一个key初始化值，然后点击修改值按钮我们就会改变key的值，路由view是可以根据key的值改变而刷新的，这样是不是很简单。下面贴下我的效果图

是不是很简单啊，vue的key刷新就到这里没有了，在这里求个赞，谢谢！