父组件调用子组件的方法以及子组件调用父组件的方法

一、父调用子

 

需求，新增页面的某个字段的select要根据父组件的某个值确定，并且需要在打开页面时就已初始化好。

1）首先在子组件中写好方法

methods:{


  getOption(Strategy){
  if(Strategy){
    if(Strategy==3){
      this.Options=[{value:'3',name:'大象'}]
    }
    else{
      this.surveyStrategyOptions=[{value:'1',name:'猫'},{value:'2',name:'狗'}]
    }
  }
  else{
    this.surveyStrategyOptions=[{value:'1',name:'猫'},{value:'2',name:'狗'},{value:'3',name:'大象'}]
  }
  },


}

2）然后在父组件中加子组件时写上

 ref="childAdd" 

<add ref="childAdd" ></add>

3）ref可以给元素或者子组件祖册引用信息，引用信息注册在$refs对象上，引用指向DOM元素或者组件实例。所以我们可以在父组件中使用

this.$refs.childAdd.getOption(this.Strategy);

调用子组件的getOption方法，同时传递参数，这样我们就可以根据父组件件的Strategy，动态的控制Options的值了。

二、子调用父

1、

1）在父组件中写入方法

methods:{

   loadData(){

      //具体方法就不写了

   }

} 

2）在子组件中直接

this.$parent.loadData();

如果这是刷新父组件列表的方法，那么此时父组件的数据已重新被刷新

2、

1)在父组件中监听ModalClose

<add @ModalClose="ModalClose" ></add>

在方法中写入

methods:{

   ModalClose(){

       this.show=false;

}

}

2)在组件中的方法中写入

this.$emit("ModalClose"); 

可以运行ModelClose方法了。