vue3子组件除非父组件方法并传参

在Vue3中，如果你想要在子组件中触发父组件的方法并且传递参数，你可以使用`$emit`自定义事件。子组件通过`emit`函数向其父组件发送一个事件，并附带需要传递的数据作为参数。例如：

<!-- 子组件 template -->
<template>
  <button @click="sendDataToParent">点击发送数据</button>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义一个方法来触发事件
const sendData = (param) => {
  // 使用 $emit 触发名为 'customEvent' 的自定义事件，并传递参数
  this.$emit('customEvent', param);
};
</script>

然后，在父组件的模板中监听这个事件并处理传递的数据：

<!-- 父组件 template -->
<template>
  <ChildComponent @customEvent="handleCustomEvent" />
</template>

<script>
export default {
  methods: {
    handleCustomEvent(data) {
      console.log('从子组件接收到的数据:', data);
      // 这里可以对接收到的数据做进一步的操作
    },
  },
};
</script>

在这个例子中，当你点击子组件的按钮，它会调用`sendData`方法并将数据传递给父组件的`handleCustomEvent`方法。