vue3父组件触发子组件

在Vue3中，父组件想要触发子组件的行为通常通过props、事件或者自定义指令来实现。以下是几种常见的方式：

1. **Props传递数据并触发方法**：
父组件可以将需要的数据作为prop传递给子组件，并在子组件内部监听这个prop的变化。当prop值变化时，子组件会自动更新。

   // 父组件
   <child-component :data="parentData" @update="handleChildUpdate"></child-component>

   // 子组件
   methods: {
     updateValue(newVal) {
       this.$emit('update', newVal);
     }
   }

2. **通过事件系统**：
父组件可以直接发射一个自定义事件，然后在子组件的`@some-event`事件处理器里响应。

   // 父组件
   this.$emit('customEvent', 'data-to-trigger');

   // 子组件
   mounted() {
     this.$on('customEvent', data => {
       // 处理逻辑...
     });
   }

   beforeDestroy() {
     this.$off('customEvent');
   }

3. **使用ref和自定义指令v-once**：
如果想在子组件销毁后再触发动作，可以使用`ref`配合`v-once`指令，保证只渲染一次，父组件可以在任何时候访问到子组件实例。

   <!-- 父组件 -->
   <template v-once>
     <child-component ref="childRef" />
   </template>

   // 在父组件的methods中
   triggerAction() {
     this.$refs.childRef.someMethod();
   }