This situation involves a Graph component displayed in the body of the page, allowing user modifications.
Additionally, there is a Search component located in the header of the page.
These two components are independent - Graph is exclusive to the body of this specific page, while Search is present in the header of all pages. Both components are part of app.js, which currently consists of the following code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('search', require('./components/Search').default);
Vue.component('graph', require('./components/Graph').default);
/* other components */
import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
Vue.use(PerfectScrollbar);
const app = new Vue({
el: '#app',
data : {
},
methods : {
},
mounted : function(){
},
computed : {
}
});
Now, the challenge is to send any changes made in Graph to the Search component. The specific data being sent is irrelevant, the focus is on the sending process.
So, how can I send data from Graph to Search? I have attempted to emit the changes, but I am unsure how to capture them in the Search component. I have used emit in the past with child/parent components, but I cannot find clear documentation on how to implement it in this scenario.
My intuition suggests that the process should involve app.js in some manner, but I am struggling to identify the correct syntax.