Javascript 如何创建将用户输入发送到其他组件的vue模式

我正在尝试创建一个模式组件，该组件接受用户输入，保存该信息后，将显示在另一个组件中。例如，系统会提示用户在模式组件（modal.vue）中分别输入他们的名字和姓氏。一旦用户保存了数据（模式上的提交方法），数据将显示在另一个组件（InputItem.vue）上

目前，我有一个包含输入元素的CreateEvent.vue组件，一个作为模式的modal.vue组件，一个EventItem.vue组件，在执行CreateEvent后显示输入的内容，一个EventsList.vue组件，显示用户创建的所有事件，最后，app.vue，其中包含模态和事件组件

我已经能够在没有模态组件的情况下成功地实现这个CRUD功能，但是一旦我添加了模态，我就会感到困惑

如果你能帮我找到正确的方向，我将不胜感激

Modal.vue

<template>
  <transition name="modal-fade">
    <div class="modal-backdrop">
      <div
        class="modal"
        role="dialog"
        aria-labelledby="modalTitle"
        aria-describedby="modalDescription"
      >
        <header class="modal-header" id="modalTitle">
          <slot name="header">
            Create an Event
            <button
              type="button"
              class="btn-close"
              @click="close"
              aria-label="Close modal"
            >
              x
            </button>
          </slot>
        </header>
        <section class="modal-body" id="modalDescription">
          <slot name="body">
            <div @keyup.enter="addTodo">
              <input
                type="text"
                class="todo-input"
                placeholder="What needs to be done"
                v-model="newTodo"
              />
              <input
                type="text"
                placeholder="add an emoji?"
                v-model="newEmoji"
              />
            </div>
            <button @click="doneEdit">Create Event</button>
            <button @click="cancelEdit">Cancel</button>
          </slot>
        </section>
        <footer class="modal-footer">
          <slot name="footer">
            I'm the default footer!

            <button
              type="button"
              class="btn-green"
              @click="close"
              aria-label="Close modal"
            >
              Close me!
            </button>
          </slot>
        </footer>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'modal',
  data() {
    return {
      newTodo: '',
      newEmoji: '',
      idForTodo: this.todos.length + 1
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    addTodo() {
      if (this.newTodo.trim().length == 0) return

      this.todos.push({
        id: this.idForTodo,
        title: this.newTodo,
        emoji: this.newEmoji
      })
      this.newTodo = ''
      this.newEmoji = ''
      this.idForTodo++
    }
  }
}
</script>

创建一个事件
x
创建事件
取消
我是默认的页脚！
关上我！
导出默认值{
名称：'模态'，
数据（）{
返回{
纽托德：“，
新表情：''，
idForTodo:this.todos.length+1
}
},
方法：{
关闭（）{
此.$emit（'关闭'）
},
addTodo（）{
如果（this.newTodo.trim（）.length==0）返回
这个。待办事项。推({
身份证号码：这是idForTodo，
标题：这是新多道，
表情符号：这个。新表情符号
})
this.newTodo=“”
this.newEmoji=''
这是我的朋友++
}
}
}

CreateEvent.vue

<template>
  <div @keyup.enter="addTodo">
    <input
      type="text"
      class="todo-input"
      placeholder="What needs to be done"
      v-model="newTodo"
    />
    <input type="text" placeholder="add an emoji?" v-model="newEmoji" />
  </div>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array
    }
  },
  data() {
    return {
      newTodo: '',
      newEmoji: '',
      idForTodo: this.todos.length + 1
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim().length == 0) return

      this.todos.push({
        id: this.idForTodo,
        title: this.newTodo,
        emoji: this.newEmoji
      })
      this.newTodo = ''
      this.newEmoji = ''
      this.idForTodo++
    }
  }
}
</script>

导出默认值{
道具：{
待办事项：{
类型：数组
}
},
数据（）{
返回{
纽托德：“，
新表情：''，
idForTodo:this.todos.length+1
}
},
方法：{
addTodo（）{
如果（this.newTodo.trim（）.length==0）返回
这个。待办事项。推({
身份证号码：这是idForTodo，
标题：这是新多道，
表情符号：这个。新表情符号
})
this.newTodo=“”
this.newEmoji=''
这是我的朋友++
}
}
}

EventItem.vue

<template>
  <div class="todo-item">
    <h3 class="todo-item--left">
      <!-- <span v-if="!editing" @click="editTodo" class="todo-item--label">
        {{ title }}
        {{ emoji }}
      </span> -->
      <input
        class="todo-item--edit"
        type="text"
        v-model="title"
        @click="editTitle"
        @blur="doneEdit"
      />
      <input
        class="todo-item--edit"
        type="text"
        v-model="emoji"
        @click="editEmoji"
        @blur="doneEdit"
      />

      <!-- <button @click="doneEdit">Update</button>
      <button @click="cancelEdit">Cancel</button> -->
    </h3>
    <button class="remove-item" @click="removeTodo(todo.id)">✘</button>
  </div>
</template>

<script>
export default {
  name: 'todo-item',
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      id: this.todo.id,
      title: this.todo.title,
      emoji: this.todo.emoji,
      editing: this.todo.editing,
      beforeEditCacheTitle: this.todo.title,
      beforeEditCacheEmoji: this.todo.emoji
    }
  },
  methods: {
    editTitle() {
      this.beforeEditCacheTitle = this.title
      this.editing = true
    },
    editEmoji() {
      this.beforeEditCacheEmoji = this.emoji
      this.editing = true
    },
    doneEdit() {
      if (this.title.trim() == '') {
        this.title = this.beforeEditCacheTitle
      }
      if (this.emoji.trim() == '') {
        this.emoji = this.beforeEditCacheEmoji
      }

      this.editing = false
      this.$emit('finishedEdit', {
        id: this.id,
        title: this.title,
        emoji: this.emoji,
        editing: this.editing
      })
    },
    cancelEdit() {
      this.title = this.beforeEditCacheTitle
      this.emoji = this.beforeEditCacheEmoji
      this.editing = false
    },
    removeTodo(id) {
      this.$emit('removedTodo', id)
    }
  }
}
</script>

✘
导出默认值{
名称：“待办事项”，
道具：{
待办事项：{
类型：对象，
必填项：true
}
},
数据（）{
返回{
id:this.todo.id，
标题：this.todo.title，
表情符号：这个。todo。表情符号，
编辑：this.todo.editing，
beforeEditCacheTitle:this.todo.title，
beforeEditCacheEmoji:this.todo.emoji
}
},
方法：{
编辑标题（）{
this.beforeEditCacheTitle=this.title
this.editing=true
},
editEmoji（）{
this.beforeEditCacheEmoji=this.emoji
this.editing=true
},
doneEdit（）{
if（this.title.trim（）=''）{
this.title=this.beforeEditCacheTitle
}
if（this.emoji.trim（）=''）{
this.emoji=this.beforeEditCacheEmoji
}
this.editing=false
此.$emit（'finishedit'{
id:this.id，
标题：这个，
表情符号：这个，表情符号，
编辑：这是编辑
})
},
取消编辑（）{
this.title=this.beforeEditCacheTitle
this.emoji=this.beforeEditCacheEmoji
this.editing=false
},
removeTodo（id）{
此.$emit（'removedTodo'，id）
}
}
}

Events.vue

<template>
  <div>
    <transition-group
      name="fade"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <EventItem
        v-for="todo in todosFiltered"
        :key="todo.id"
        :todo="todo"
        @removedTodo="removeTodo"
        @finishedEdit="finishedEdit"
      />
    </transition-group>
  </div>
</template>

<script>
import EventItem from '@/components/EventItem'

export default {
  components: {
    EventItem
  },
  data() {
    return {
      filter: 'all',
      todos: [
        {
          id: 1,
          title: 'Eat sushi',
          emoji: 'The modal component should emit the values instead of pushing it into the todos array. When it emits it, the parent component (App.vue) listens for the emitted items.

I would do something like this

Modal.vue


<template>
   ...
// header
<section class="modal-body" id="modalDescription">
  <slot name="body">
    <div @keyup.enter="addTodo">
      ...
    </div>
    <button @click="handleModalSubmit">Create Event</button>
  ...
  //footer
  ...
</template>

<script>
export default {
  ...
  data() {
    ...
  },
  methods: {
    ...,
    handleModalSubmit() {
      this.$emit('todos-have-been-submitted', this.todos);
    },
    addTodo() {
      ...
      this.todos.push({
        id: this.idForTodo,
        title: this.newTodo,
        emoji: this.newEmoji
      })
      ...
    }
  }
}
</script>

从“@/components/EventItem”导入EventItem
导出默认值{
组成部分：{
事件项
},
数据（）{
返回{
过滤器：“全部”，
待办事项：[
{
id:1，
标题：“吃寿司”，
emoji:“模态组件应该发出值，而不是将其推入todos数组。当它发出值时，父组件（App.vue）会侦听发出的项

我会这样做

Modal.vue


...
//标题
...
创建事件
...
//页脚
...
导出默认值{
...
数据（）{
...
},
方法：{
...,
handleModalSubmit（）{
this.$emit（'todos-have-been-submitted'，this.todos）；
},
addTodo（）{
...
这个。待办事项。推({
身份证号码：这是idForTodo，
标题：这是新多道，
表情符号：这个。新表情符号
})
...
}
}
}
在这种情况下，模态主要做什么？模态只添加TODO吗？如果是，您可以在模态中添加多个TODO吗？我问的原因是，我发现您也可以在CreateEvent组件中添加TODO。这有点让人困惑。模态的任务是添加TODO。将CreateEvent组件分开有意义吗或者直接在模态组件中对其进行编码。您好，@tylermorals，我更新了答案，将这一行包含在
App.vue
组件的
handleTodoSubmission
方法中。
this.todos=[…todos]；
建议创建对象的副本以防止引用问题。