vue 父子组件调用

• 子组件调用父组件方法

  <!--父组件-->
  <!--注意命名时不要用驼峰命名，否则不生效-->
  <search @search-data='searchData'></search>
  
  

  //子组件
  this.$emit('search-data',6666)
  

• 父组件调用子组件

• 方法1

  • 通过ref

  <!--父组件-->
  <!--在引入的子组件上标注 ref -->
  <jPicker ref="jpicker" />
  

  //父组件
  //父组件直接调用ref命名加上子组件的方法 changenSel
  this.$refs.jpicker.changenSel(-1);
  

• 方法2

  • 通过$emit、$on配合使用

  <!--父组件-->
  <Button @click="handleClick">点击调用子组件方法</Button>
  <jPicker  ref="jpicker" />
  

  //父组件
    handleClick() {
                 this.$refs.child.$emit("childMethod")    //子组件$on中的名字
          },
  

  //子组件
    mounted() {
          this.$nextTick(function() {
              this.$on('childMethod', ()=>{
                  console.log('我是子组件方法');
              });
          });
       },