Question

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

＆＃13;

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

＆＃13;

这里我有另一个组件，在这个组件中我需要获取模态的值并将其渲染

＆＃13;

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

＆＃13;

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

Answer 1

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

在main.js中

public function insertReq($dID, $bphone)
    {
            $stmt = $this->conn->prepare("INSERT INTO RequestedDevices(dID, deviceName, Medical, Description, Educational, DevicePicture, bphone) VALUES((SELECT id, deviceName, Medical, Description, Educational, DevicePicture WHERE id = ?), ?)");
           $stmt->bind_param("ss", $dID, $bphone);
            $flag = $stmt->execute();
            $stmt1 = $this->conn->prepare("DELETE FROM DEVICE WHERE id= ? ");
            $stmt1->bind_param("s", $dID);
            $flag1 = $stmt1->execute();
            if ($flag & flag1) {
                return ADDED;
            } else {
                return NOT_ADDED;

            }

        }

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

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

并发出它

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

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

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

1 个答案: