[Vuejs]-In Vue.js.How to pass value from main to compent or template

by

0👍

The recommended way of handling this is to use a JS object for storing your values. This allows you to update them and have the changes reflected in your app. See this docs page for more info, which also has more information on better practices for larger apps.

Here’s an example of how you could accomplish that:

// store.js
const store = {
  author: "john",
}

export default store

// Index.vue
<template>
  <div>{{ store.author }}</div>
</template>

<script>
import store from './store'

export default {
  data() {
    return { store }
  }
}
</script>

0👍

For simple application you can just use bus instead of vue : more information at section Non Parent-Child Communication in Vue-Js document : https://v2.vuejs.org/v2/guide/components.html

Sometimes two components may need to communicate with one-another but they are not parent/child to each other. In simple scenarios, you can use an empty Vue instance as a central event bus :

var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

Leave a comment