11_父组件调用子组件方法

父组件调用子组件的方法

1. 使用ref
2. 使用变量+watch
3. 使用中间class

使用中间class

base-on-controller

function receiveController(to, from) {
  Object.assign(to, from);
}
/* vue 混入模式 */
receiveController.mixin = {
  methods: {
    receiveController
  }
};
export { receiveController };

父组件

<ServerCorssDispatch
  @controllerReady="receiveController(serverCorssDispatchSub.controller, $event)"
></ServerCorssDispatch>

import { receiveController } from '.../base-on-controller';
export default {
  mixins: [receiveController.mixin],
  data() {
    return {
      serverCorssDispatchSub: {
        // 跨服分配组件
        controller: { newSearch: null }
      }
    }
  },
  methods: {
    newSearch() {
      this.serverCorssDispatchSub.controller.newSearch();
    }
  }
}

子组件

export default {
  data() {
    return {}
  },
  created() {
    this.$emit('controllerReady', { newSearch: this.newSearch });
  },
  methods: {
    newSearch() {
      // ...具体实现
    }
  }
}