vue3 setup父组件通过事件触发子组件

在 Vue3 中，你可以通过事件来触发子组件的操作。下面是一个简单的示例：

在父组件中，你需要定义一个方法来触发事件，并使用 `emits`选项声明该事件：

 <div>
 <button @click="triggerEvent">触发事件</button>
 <child-component @custom-event="handleCustomEvent"></child-component>
 </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
 components: {
 ChildComponent },
 emits: ['custom-event'],
 methods: {
 triggerEvent() {
 this.$emit('custom-event', 'Hello from parent');
 },
 handleCustomEvent(message) {
 console.log('子组件触发的事件：', message);
 }
 }
};
</script>

在子组件中，你可以监听父组件触发的事件，并执行相应的操作：

 <div>
 <!-- 子组件内容 -->
 </div>
</template>

<script>
export default {
 mounted() {
 this.$emit('custom-event', 'Hello from child');
 }
};
</script>

在父组件中，点击按钮将触发 `triggerEvent` 方法，该方法会通过 `$emit` 方法触发 `custom-event`事件，并传递消息 "Hello from parent"。子组件通过监听 `custom-event`事件，并执行相应的操作。

当子组件加载完成时，它会立即触发 `custom-event`事件，并传递消息 "Hello from child"。

这样，父组件就可以通过事件触发子组件了。希望对你有帮助！