vue3中 在被引用的页面 触发引用页的方法

在Vue3中，可以通过事件和props来实现组件之间的通信，从而在被引用的页面触发引用页的方法。

1. 通过事件传递数据

在引用页组件中定义一个方法，可以在该方法中触发需要调用的方法，并通过`$emit`方法触发事件并传递数据：

const app = Vue.createApp({
  methods: {
    triggerMethod() {
      this.$emit('event-name', data); // 触发事件并传递数据
    }
  }
});

在被引用的页面中，需要监听该事件，并定义相应的方法来处理数据和调用需要触发的方法：

<template>
  <div>
    <child-component @event-name="handleEvent"></child-component>
  </div>
</template>
<script>
export default {
  methods: {
    handleEvent(data) {
      // 处理数据
      // 调用需要触发的方法
    }
  }
}
</script>

2. 通过props传递方法

在引用页组件中，可以通过props将需要调用的方法传递给被引用的页面组件：

const app = Vue.createApp({
  props: {
    methodName: {
      type: Function,
      required: true
    }
  },
  methods: {
    triggerMethod() {
      this.methodName(); // 调用传递的方法
    }
  }
});

在被引用的页面中，需要在引用页组件中使用`v-bind`指令将需要调用的方法传递给被引用的组件：

<template>
  <div>
    <child-component :method-name="handleMethod"></child-component>
  </div>
</template>
<script>
export default {
  methods: {
    handleMethod() {
      // 调用需要触发的方法
    }
  }
}
</script>

通过这两种方式，可以实现在被引用的页面触发引用页的方法。需要注意的是，Vue3中需要使用`Vue.createApp()`创建应用实例来定义组件。