1. 程式人生 > >vue中父元件傳值給子元件,父元件值改變,子元件不能重新渲染

vue中父元件傳值給子元件,父元件值改變,子元件不能重新渲染

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();
  }

},