如何获取输入值并将其发送到另一个组件

Question

I have an modal component, and inside this i have two input how i can get the value inserted in this input and send him to another component?

  <template> <modal v-if="Modal"> div(class="modal-title has-text-centered" slot="header") div(slot="content") div(class="control") div(class="columns") div(class="column") div(class="field") div(class="control") input(class="input is-info is-large" type="text" placeholder="Analysis name") div(class="field") div(class="control") input(class="input is-info is-large" type="text" placeholder="Item name") div(slot="footer") button(class="button is-info is-large modal-button" @click="closeModal" style="margin-right:5em;") Cancel <router-link :to="{name: 'analyse'}" class="button is-info is-large modal-button">Create</router-link> </modal> </template> <script> import JwtDecode from 'jwt-decode' import Modal from '../layout/modal/Basemodal.vue' import Section from '../../views/Section.vue' export default { data: function() { return { user: '', isActive: false, isDrop: false, Modal: false, analyseName: '', analyseItem: '', application: '', } }, components: { 'modal': Modal, 'section-content': Section, }, methods: { // on-click logout the user and send him to the initial page logout: function(){ this.$store.dispatch('logout') .then(resp => { this.$router.push('/') }) }, // used to change the color of the selected button toggle: function(event) { event.ldaModal = !event.ldaModal }, createAnalyse: function() { this.$route.push('/analyse') } }, mounted() { // render user token to get all user information this.user = JwtDecode(localStorage.getItem('token')) } } </script> 

and here i have another component, in this component i need to get the value of modal and render it

 <template lang="pug"> p {{ input1-value }} p {{ input2-value }} </template> 

please, what's the best approach to do this?

Answer 1

I think that you should use the EventBus to solve your question.

in main.js

const bus = new Vue()
Vue.prototype.$bus = bus 

you can register an event listener

this.$bus.on( 'test', ( data ) => {
 console.log( 'test', data );
} );

and emit it

this.$bus.emit( 'test', { code: 1 } );

you also can look at https://github.com/yyued/hub.js