Necesito acceder al método de un componente secundario usando Vue.js 3 con API de opciones. Hay una respuesta en Cómo acceder a un método secundario desde el padre en vue.js , pero es para Vue.js 2 y Vue.js 3 pero con API de composición.
Todavía probé esto, todo en el componente principal:
<dropdown-list @update="updateChildComponents"></dropdown-list> <child-component-1 ref="childComponent1Ref" :url="url"></child-component-1> <child-component-2 ref="childComponent2Ref" :url="url"></child-component-2>y
methods: { updateChildComponents() { this.$refs.childComponent1Ref.childComponentMethod(); this.$refs.childComponent2Ref.childComponentMethod(); } }Esto realmente accede con éxito al método, pero creo que esta puede no ser la forma correcta.
En segundo lugar, uso un accesorio en el componente secundario que actualizo en el componente principal y uso en el método del componente secundario, que se actualiza solo después del segundo evento. Creo que estos dos pueden estar relacionados.
Componente hijo:
props: ['url'], methods: { childComponentMethod() { console.log(this.url); // can access the value from the previous event } }Agradezco cualquier ayuda.
Para la comunicación entre padres e hijos, debe transferir el valor con accesorios. En caso de que el valor esté cambiando en el padre, debe agregar el reloj. Llamó enlace de 1 vía porque el padre no puede ver los cambios en el componente hijo.
Padre -> hijo = usar accesorios.
Niño -> padre = usar emite y en evento.
<script> import { reactive,watch, computed,onMounted } from "vue"; export default { components: { }, props: { metadata: String }, emits: [""], setup(props) { onMounted(async () => { //first initilize if (props.metadata) { state.metadataName = props.metadata; } }); //track after the changes in the parent watch( () => props.metadata, async (metadata) => { if (metadata) { } } ); return { }; }, }; </script>