举一个 vue 子组件调用父级方法并传递参数的例子

假设有一个父组件 Parent.vue 和一个子组件 Child.vue，我们可以通过以下步骤在子组件中调用父组件的方法并传递参数：

1. 在父组件中定义一个方法，例如：

methods: {
  parentMethod(parameter) {
    // 执行一些操作，例如打印参数
    console.log(parameter);
  }
}

2. 在父组件中使用子组件并向其传递一个名为 `child-method` 的 prop，例如：

<template>
  <div>
    <Child :child-method="parentMethod"></Child>
  </div>
</template>

3. 在子组件中定义一个名为 `child-method` 的 prop，该 prop 的值应该是一个函数，例如：

props: {
  childMethod: {
    type: Function,
    required: true
  }
}

4. 在子组件中调用 `childMethod` 并传递参数，例如：

methods: {
  someMethod() {
    const parameter = "Hello World!";
    this.childMethod(parameter);
  }
}

这样就可以在子组件中调用父组件的方法并传递参数了。完整的代码如下：

Parent.vue

<template>
  <div>
    <Child :child-method="parentMethod"></Child>
  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  components: {
    Child
  },
  methods: {
    parentMethod(parameter) {
      console.log(parameter);
    }
  }
};
</script>

Child.vue

<template>
  <div>
    <button @click="someMethod">Click me!</button>
  </div>
</template>

<script>
export default {
  props: {
    childMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    someMethod() {
      const parameter = "Hello World!";
      this.childMethod(parameter);
    }
  }
};
</script>