jQWidgets Forums
jQuery UI Widgets › Forums › Vue › read parent data from child
This topic contains 4 replies, has 2 voices, and was last updated by jqwidgetsdev 2 years, 5 months ago.
-
Author
-
Hi,
My app.vue contains a tab component with 1 tab. The contents for the tab comes from child1.vue component.
Additionally I have a global footer called footer.vue.
The footer has a button/event to read the tab contents (child1.vue).How to read the data of parent component from the child footer.vue?
How to read data between child components?app.vue
<template> <div> <JqxTabs ref="myTabs" :width="300" :height="200" :position="'top'"> <ul><li>Name</li></ul> <child1 /> </JqxTabs> <myFooter /> </div> </template> <script> import JqxTabs from "jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue"; import myFooter from "./footer"; import child1 from "./child1"; export default { components: { JqxTabs, myFooter, child1 }, data: function () { return {}; }, }; </script>
footer.vue
<template> <div id="footer" style="overflow: auto"> <JqxButton ref="btnApply" :width="120" :height="26" v-on:click="btnApplyClicked()">Apply all </JqxButton> </div> </template> <script> import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue"; export default { components: { JqxButton }, data() { return {} } ,methods:{ btnApplyClicked(){ alert("btnApplyClicked"); // how to const index = this.$parent.$refs.myTabs.selectedItem; alert("btnApplyClicked " + index); // get the myForm1 if (parseInt(index) === 1) { const myForm = this.$child1.$refs.myForm1; } } } } </script>
child1.vue
<template> <div style="overflow: auto"> <JqxForm ref="myForm1" style="width: '100%'; height: '100%'" :template="template" :value="value" > </JqxForm> </div> </template> <script> import JqxForm from "jqwidgets-scripts/jqwidgets-vue/vue_jqxform.vue"; export default { components: { JqxForm }, data() { return { template: [ { bind: "name", type: "text", label: "name", }, ], value: { name: "tommy", }, }; }, }; </script>
Thanks in advance.
Hi,
You can pass callback functions that will be invoked on a given event.
I have provided you with an example in which a formName is saved in the App component.
In the Child1 there is your form and when the name changes the formName variable will be also changed,
this way when you click the button in the Footer it will receive the formNamehttps://codesandbox.io/embed/laughing-tesla-03xige?fontsize=14&hidenavigation=1&theme=dark
I hope this helps!
Best regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/Hi Svetoslav,
Sorry, I am not getting your example. Able to simplify it?
Thanks.
Hi,
Sorry for the incorrect link, here is the correct one: https://codesandbox.io/embed/romantic-williams-zjdwn2?fontsize=14&hidenavigation=1&theme=dark
In your case, you have a Child1 component, Footer and the App.
You want the Footer to be connected with Child1.
To achieve this your App should save the form’s information as a state.
When the form value in Child1 changes, a callback provided as a property of Child1 is invoked to change the state in the App component,
this way the form value is being transferred to the App Component.
Since we have the value of the form in the App component we can pass that value to the footer or pass a callback that will be invoked when we click the button in the Footer.Please see the provided demo to get familiar
Best regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/Thanks Svetoslav, yes it makes sense now.
Best regards.
-
AuthorPosts
You must be logged in to reply to this topic.