1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法
 
 
props: {
  echartStyle: {
    type: Object,
    default() {
      return {}
    }},
    titleText: {
      type: String,
      default: ''
    },
    tooltipFormatter: {
      type: String,
      default: ''
    },
    opinion: {
      type: Array,
      default() {
        return []
      }
    },
    seriesName: {
      type: String,
      default: ''
    },
    opinionData: {
      type: Array,
      default() {
        return []
      }
    }
 
}
 
//watch进行监听
 
 
watch:{
  titleText:function(newValue,oldValue){
    this.getChange();
  },
  echartStyle:{
    handler(newValue,oldValue){
       this.getChange();
    },
    deep:true
  },
  tooltipFormatter:function(newValue,oldValue){
    this.getChange();
  },
  opinion:{
    handler(newValue,oldValue){
      this.getChange();
    },
    deep:true //深度监听
  },
  seriesName:function(newValue,oldValue){
    this.getChange();
  },
  opinionData:{
    handler(newValue,oldValue){
      this.getChange();
    },
    deep:true
  }

},
 
2 在父组件中用ref="str" 来声明组件，然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法
 
来 重新渲染（暂时使用有bug，不能够及时渲染,父组件值已经改变了，但是子组件值仍然没有改变，不能够及时渲染）
 
   这个方法感觉props'接收数据在调用方法之后，明明父组件的值已经改变了，但是父组件在调用子组件方法时，数据仍然没有  接收到，调用之后才接收到，这个方法暂且没用，应该是声明ref的时候声明的是当前组件的实例，然后调用时调用的也是值未改变时的属性。这个没什么用，可以用来调用子组件方法。
 
<pie-chart2   ref="pieChart"
  :echartStyle="echartStyle"  :titleText="titleText" :tooltipFormatter="tooltipFormatter"
  :opinion="opinion"  :seriesName="seriesName" :opinionData="opinionData"

>
</pie-chart2>
 
 
 
refresh:function(){
  if(!this.bindData.data){
    this.bindData.data = this.bindData.configures;
  }
  this.bindData.id = this.bindData.moduleId ||'pir';
  if(this.bindData.data){
    alert(this.bindData.data.name);
    this.changeContent(this.bindData.data);
    this.getChartData(this.bindData.data);
    this.$refs.pieChart.getChange();
  }

},
 
3 在子组件上使用 v-if ="flag" （谢谢各位老哥的建议）
 
初始flag:true
 
修改data时
 
changData(data){
 
this.flag = false
 
this.data =data
 
this.$nexTick(()=>{
 
this.flag = true;
 
})
 
}
 
  
 
 
 
 
  
 

1.通过@func绑定事件，$emit('func',[])
 父组件：
 
<pick-country v-show="modal_show" @func="getMsgFromSon(arguments)" :content="pick_content_show"></pick-country>
 
method方法
 //组件传值
 
getMsgFromSon(data){
	const that = this;
	setTimeout(() => { that.modal_show = data[0][0] }, 10)
	setTimeout(() => { that.area_id = data[0][1] == '' ? that.area_id : data[0][1]}, 10)
},
 
子组件
 
setTimeout(() => { that.$emit('func',[that.modal_show, '']) }, 500)
 
2.通过prop属性，在子组件watch监听该属性的变化
 
watch: {
	'value': {
		  handler (newVal) {
			this.currentValue = newVal
		  },
		  deep: true,
		  immediate: true,
	}, 
 },

cityComponents是子组件，cityId是父组件传给子组件的值，getData是子组件的渲染数据方法
 
一：在父组件中用ref=“com” 来声明组件，然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染，一定要写Vue.nextTick( [callback, context] )
 
子组件this.$emit('checkcity', row)
 父组件
 
    checkcity(row) {
      this.cityId = row.id
      // DOM 更新后
      this.$nextTick(() => {
        this.$refs.cityComponents.getData()
      })
    }
 
二：子组件用watch监听数据变化，重新渲染，更推荐这个方法
 
  watch: {
    cityId: {
      immediate: true, // 这句重要
      handler(val) {
        this.getData()
      },
    },
  }

 
 
子组件改变父组件传递的 参数 不刷新
 
 
 
 
① 子组件上 添加 v-if
 
 
 
 
② 父组件 监听数据
 
 
this.reFresh= false  
 this.$nextTick(()=>{
 this.reFresh = true 
   })
 
 
 
##具体实现
 
 
 
 
子组件
 
 
<template>
      <a-input>
        <a-icon @mousedown="cleanClick"/>
        <span slot="suffix" v-show="!cleanInputType"> 分</span>
      </a-input>
 </template>
 
cleanClick() {
  
  // 判断如果是关联小题 那么就开始让他的题型状态为false

  if (this.scoreParam.structureType) {

    this.scoreParam.multipleFlag = false;
    this.scoreParam.fillBlankFlag = false;
  }
  this.$emit('my-reFresh', this.scoreParam);
},
 
 
 
父组件
 
 
<to-score-templeate
  v-if="reFresh"
  @my-reFresh="myReFresh"
 ></to-score-templeate>
 
myReFresh(msg){
  this.reFresh= false
  this.$nextTick(()=>{
    this.reFresh = true
  })
  console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
}