Question

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

这是我的代码：

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>

我该怎么做？

Answer 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>组件。

VueJs将数据发送到模态组件

1 个答案: