Vue中子组件调用父组件的方法，这里有三种方法提供参考
 
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
 
父组件
 
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
 
子组件
 
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>
 
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
 
父组件
  
 
<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
 
子组件
 
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>
 
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法
 
父组件
 
<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
 
子组件
  
 
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>
 
 

子组件使用this.$emit()向父组件传值
 
首先必须在父组件中引用子组件，然后实现传值
 
 
第一步 在父组件中引入子组件
 
使用import引入组件
 
import indexImportOrder from './components/indexImportOrder'
 
声明
 
//定义组件
      components:{
        indexImportOrder,
      },
 
使用
 
<indexImportOrder ref="indexImportOrder"/>
 
 
第二步 子组件向父组件传值
 
1.  在子组件中需要向父组件传值处使用this.$emit("function",param);   //其中function为父组件定义函数，param为需要传递参数
 
 
 
//新订单页面跳转
        viewBusiness(){
          let flag = false;
          this.$emit('closeMain',flag);
        },
 
2.  在父组件中子组件引用处添加函数v-on:function="function1"； //其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称
 
v-on： 可用 @ 代替 @function="function1" ，@ 为 v-on：的简写
 
<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>
 
val及为子组件中flag，即接收的子组件参数
 
closeMain(val){
        this.flag = val;
      },
 
 
 
 
 
 
 
更详细解释可参照：https://www.cnblogs.com/padding1015/p/7878741.html
 
 
 
  

如图：选择城市后，页面重新请求数据！（城市选择是子组件）选择完后不刷新页面，重新调用接口渲染主页面！ 
 
 
 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
 
父组件
 
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
 
子组件
 
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>
 
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。
 
父组件
 
<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
 
子组件
 
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>
 
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法
 
父组件
 
<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>
 
子组件
 
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>
 
三种都可以实现子组件调用父组件的方法，但是效率有所不同，根据实际需求选择合适的方法
 
更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1
 

（1）vue中父组件调用子组件函数
 
用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法
 
详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName.
 
然后再进行调用，也就是 this.$refs.refName.method
 
子组件：
 
    <template>
      <div>
        childComponent
      </div>
    </template>
     
    <script>
      export default {
        name: "child",
        methods: {
          childClick(e) {
            console.log(e)
          }
        }
      }
    </script>
 
父组件：
 
    <template>
      <div>
        <button @click="parentClick">点击</button>
        <Child ref="mychild" />   //使用组件标签
      </div>
    </template>
     
    <script>
      import Child from './child';   //引入子组件Child
      export default {
        name: "parent",
        components: {
          Child    // 将组件隐射为标签
        },
        methods: {
          parentClick() {
            this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
          }
        }
      }
    </script>
 
（2）vue中子组件调用父组件函数
 
方法一：
 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
 
父组件：
 
    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

 
子组件
 
    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>

 
方法二：
 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了
 
父组件
 
    <template>
      <div>
        <child @fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>
 
子组件
 
    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$emit('fatherMethod');
          }
        }
      };
    </script>
 
方法三
 把方法传入子组件中，在子组件里直接调用这个方法
 
父组件
 
    <template>
      <div>
        <child :fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

 
子组件
 
    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>