举一个 vue 组件调用父级方法的例子

假设有一个父组件 `Parent.vue` 和一个子组件 `Child.vue`，子组件需要调用父组件的方法。

在父组件中，定义一个方法：

<template>
  <div>
    <Child @child-event="parentMethod" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  methods: {
    parentMethod() {
      console.log('Parent method called from child component');
    },
  },
};
</script>

在子组件中，通过 `$emit` 触发事件，并传递参数：

<template>
  <button @click="emitEvent">Call parent method</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('child-event');
    },
  },
};
</script>

在子组件中触发 `emitEvent` 方法，会触发 `child-event` 事件，从而调用父组件的 `parentMethod` 方法。

相关问题

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

假设有一个父组件 Parent 和一个子组件 Child，要在子组件中调用父组件的方法并传递参数，可以按照以下步骤进行：

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

methods: {
  parentMethod: function(param) {
    // 处理逻辑
  }
}

2. 在父组件中将该方法以属性的形式传递给子组件，例如：

<child :parent-method="parentMethod"></child>

3. 在子组件中通过 props 接收该属性，并定义一个方法来触发父组件的方法，例如：

props: {
  parentMethod: Function
},
methods: {
  childMethod: function(param) {
    this.parentMethod(param);
  }
}

4. 在子组件中调用 childMethod 方法并传递参数即可触发父组件的方法并传递参数，例如：

<button @click="childMethod(param)">触发父级方法</button>

举一个 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>