VueJs 向模态组件发送数据

Posted 2023-02-23

【中文标题】VueJs 向模态组件发送数据

【英文标题】：VueJs Send data to modal component

【发布时间】：2018-11-16 03:58:27

【问题描述】：

我想将我的数据（第一个组件）发送到模态（另一个组件）。两个组件都位于同一个地方。我需要将数据显示到我的编辑模式的第一个组件数据表单。

这是我的代码：

form.vue：

  <template>
     <tbody v-for="user,index in users">
        <button type="button" class="btn btn-xs" data-toggle="modal" 
         data-target="#editModal"> -> edit button, show modal
     (...)
     <edit-user></edit-user>
    (...)
  </template>

<script>
      components: 
            add: addUser,
            edit: editUser
        ,
</script>

edit.vue:

  <template>
    <div id="editModal" class="modal fade" role="dialog">

     <div class="form-group">
        <input type="text" class="form-control" name="nameInput" 
value=" I WANT HERE DATA" v-model="list.name">
                            </div>
(...)
    </template>

我该怎么做？

【问题讨论】：

对我的回答有任何反馈吗？对你有帮助吗？

【参考方案1】：

解决方案是让父组件存储两个组件共享的数据。 在第一个组件上，您可以使用$emit 更改父组件的数据，然后使用props 将相同的数据传递给模态组件。

Vue.component('app-input', 
  props: ['message'],
  template: `<input type="text" placeholder="Try me" 
  v-bind:value="message"
  v-on:input="$emit('input', $event.target.value)"/>`
);

Vue.component('app-header', 
  props: ['title'],
  template: `<h4>title</h4>`
);

var app = new Vue(
  el: '#app',
  data: 
    message: ''
  
);

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <app-header v-bind:title="message"></app-header>
  <app-input v-model="message"></app-input>
</div>

上面是一个简单的例子，说明了如何做到这一点。<app-input> 组件更改了父 message data，并将相同的属性作为标题传递给 <app-header> 组件。