时间戳

首页 > 解决方案 > 如何获取输入值并将其发送到另一个组件

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

问题描述

我有一个模态组件，在这里面我有两个输入，我如何获取插入到这个输入中的值并将他发送到另一个组件？

  <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>

这里我有另一个组件，在这个组件中我需要获取 modal 的值并渲染它

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

请问，最好的方法是什么？

标签： javascriptvue.js

解决方案

我认为您应该使用 EventBus 来解决您的问题。

在 main.js 中

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

你可以注册一个事件监听器

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

并发出

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

你也可以看看https://github.com/yyued/hub.js

推荐阅读