main js pass data to vue
How to Pass Data from Main JS to Vue
Passing data is an essential part of building dynamic applications. In Vue.js, we can pass data from the main JS file to Vue components in various ways.
1. Props
The most common way to pass data from main JS to Vue is through props. Props are custom attributes that we can register on our components. We can pass data to props from the main JS file, and it will be available to the component.
<div id="app">
<my-component v-bind:prop-name="dataFromMainJS"></my-component>
</div>
<script src="main.js"></script>
In the example above, we are passing data from the main JS file to the prop-name
prop of the my-component
component using the v-bind
directive.
// main.js
new Vue({
el: '#app',
data: {
dataFromMainJS: 'Hello, World!'
}
});
In the example above, we are defining a new Vue instance and passing the dataFromMainJS
property with a value of 'Hello, World!'
2. Event Bus
We can also use an event bus to pass data from the main JS file to Vue components. An event bus is a Vue instance that we can use as a communication channel between components.
// main.js
let eventBus = new Vue();
// Emitting an event with data from main.js
eventBus.$emit('eventName', 'Data from main.js');
In the example above, we are creating a new Vue instance called eventBus
. We are then emitting an event called eventName
with data from the main JS file.
// my-component.vue
export default {
created() {
let self = this;
// Listening to the event emitted in main.js
eventBus.$on('eventName', function(data) {
self.dataFromMainJS = data;
});
},
data() {
return {
dataFromMainJS: ''
};
}
};
In the example above, we are listening to the eventName
event in the created()
lifecycle hook of the my-component
component. When the event is triggered, we are setting the dataFromMainJS
property to the data received from the event.
Conclusion
There are various ways to pass data from main JS to Vue components, including props and event buses. Choose the method that best suits your needs and build amazing applications!