How to set props to component in Vue.js in script section (without rendering)-CodePudding

I need to import component A with props and pass it to another component B. It must be rendered in component B.

import MyComponent from '/MyComponent.vue'

computed: {
    compnt: function () {
        var comp = MyComponent      
        // How can I set props to MyComponent? 
        return comp 
    }
}

What should I do to set props to component A ?

CodePudding user response：

If you only want to share data between components it's best to use vuex. You can define a variable in the state like this

# store/store.js
//...
state: {
  count: 0
}
// ...

And use it in any component you want like this.

<template>
  <span>{{ count }}</span>
</template>
<script>
export default {
  // ...
  computed: mapState(['count'])
  // ...
}
</script>

You can follow this tutorial for more information

CodePudding user response：

If you want to share the data between components you can use below solution

Create the EventBus.js file

import Vue from 'vue';

export const EventBus = new Vue();

In your component file use below code

import { EventBus } from "../EventBus.js";
export default { 
  mounted() {
      var myData = "Hi"; 
      EventBus.$emit("sendIndex", myData );
    };
  },
};

Access your data in the component as

import { EventBus } from "../EventBus.js";
export default { 
  mounted() {
    EventBus.$on('sendIndex', data => {
      console.log(data)
    });
  },
};