vue在页面调用组件得方法

在Vue.js中，页面通常通过模板（template）引用组件，并通过JavaScript或指令来调用组件内的方法。以下是基本步骤：

1. **在模板中引用组件**：在HTML模板里，你可以使用`<component>`标签来引入其他组件。例如：

   <button @click="callComponentMethod">点击调用组件方法</button>
   <my-component :data="someData" @method-called="handleMethod"></my-component>

`my-component`是你想调用方法的组件名，`:data`是数据绑定，`@method-called`是事件监听。

2. **在父组件中调用组件方法**：在父组件的`methods`选项中定义一个函数，如`callComponentMethod`，然后在`v-on`指令中调用它：

   methods: {
     callComponentMethod() {
       this.$refs.myComponent.methodName(); // 使用$refs访问组件实例并调用方法
     }
   }

3. **在组件内部暴露方法**：在组件的`methods`或`computed`选项中定义方法，如果需要外部调用，记得在`export default`对象上加上`ref`属性：

   export default {
     methods: {
       methodName() { /*...*/ },
     },
     ref: 'myComponent', // 为组件添加一个引用
   }

然后在父组件中就可以通过`this.$refs.myComponent.methodName()`来调用了。