如何在 Vue.js 中的脚本部分为组件设置道具（无渲染）

Question

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?

Answer 1

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

Answer 2

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)
    });
  },
};