Estoy usando un componente con pestañas dentro. En el componente Head (padre):
<v-btn @click="setSelectedTab('Set') "> ... <component :is="selectedTab"></component>En el componente Establecer (componente secundario), utilizo algunas emisiones que cambiarán los datos.
<div> <head-set v-show="showHeadSet" @settings=" showHeadSet = false; showScreenSettings = true; " @robotix=" showHeadSet = false; showRobotix = true; " > </head-set> <Robotix v-show="showRobotix"></Robotix> <screen-settings v-show="showScreenSettings"></screen-settings> </div> <script> data() { return { showHeadSet: true, showRobotix: false, showScreenSettings: false, }; }, </script> Cuando se presiona el botón ( @click="setSelectedTab('Set') " ), quiero que los datos del Conjunto (componente secundario) regresen como al principio ( showHeadSet: true,showRobotix: false,showScreenSettings: false, ) .
¿Sabes como hacer esto?
La forma más fácil de pasar datos a sus componentes secundarios en su caso sería usar propiedades.
Su componente principal se vería así:
<template> <div> <v-btn @click="setSelectedTab('Set') "> ... </v-btn> <component :is="selectedTab" :settings="yourSettings"></component> </div> </template> <script> export default { data: () => { yourSettings: { showHeadSet: true, showRobotix: false, showScreenSettings: false } }, methods: { setSelectedTab() { // your code this.yourSettings = { showHeadSet: true, showRobotix: false, showScreenSettings: false } } } } </script>En los componentes de su hijo, tendrá que agregar la definición de accesorios como esta
<script> export default { props: { settings: { type: Object, required: true } } } </script> Puede usar los accesorios como variables calculadas o de datos y sobrescribir la configuración según lo necesite. En el método setSelectedTab del componente principal, simplemente sobrescribe los datos a los valores predeterminados.
Puede consultar los documentos para obtener más información sobre accesorios.