Передача пользовательских событий в качестве реквизита для нового созданного компонента в VueJs

Question

Мое приложение состоит из:

Компонент с именем

<consl :output="output" @submit-to-vue><consl>

, который содержит ввод, который вызывает метод submit () при нажатии клавиши ввода.

<div> 
    <output v-html="output"></output>
    <div id="input-line" class="input-line">
        <div class="prompt">{{ prompt }}</div>
        <div>
        <input class="cmdline" autofocus 
            v-model.trim="command" 
            @keyup.enter="submit"  
            :readonly="submited" />
        </div>
    </div>

Затем метод submit() отправляет событие @submit-to-vue в родительский метод submitv(), который создает экземпляр того же компонента и добавляет его в DOM.

//........
methods: {
    submit: function () {
        this.$emit('submit-to-vue')
        this.submited = true
    }
},

и

//......
methods: {
    submitv: function () {
        var ComponentClass = Vue.extend(consl)
        var instance = new ComponentClass({
            propsData: { output: this.output }
        })
        instance.$mount() // pass nothing
        this.$refs.container.appendChild(instance.$el)

Чего я хочу достичь?

Я хочу создать новый компонент consl и добавлять его в DOM каждый раз, когда отправляется старый. (Я хочу, чтобы мое приложение имитировало терминал)

Проблема

При отправке новый созданный компонент не содержит прослушивателя событий @submit-to-vue, что не позволяет вызвать метод submitv().

Вопросы

• Как я могу решить эту проблему?
• Это правильный способ делать что-то в VueJ или есть более изящный способ?

Answer 1

В родительском компоненте объявите одно свойство данных = childs, оно будет включать все уже созданные дочерние элементы.

Таким образом, как только родительский компонент получит событие = submit-to-vue, добавьте одного нового дочернего элемента к this.childs

Наконец, используется v-for для визуализации этих дочерних компонентов.

Хитрость : всегда учитывать управляемый данными способ, а не манипулировать dom напрямую, насколько это возможно.

ниже приведено одно простое демо :

Vue.config.productionTip = false

Vue.component('child', {

  template: `
  <div> 
    <div>Label:<span>{{output}}</span></div>
    <div>Value:<span>{{command}}</span></div>
    <div id="input-line" class="input-line">
        <div class="prompt">{{ prompt }}</div>
        <div>
        <input class="cmdline" autofocus 
            v-model.trim="command" 
            @keyup.enter="submit"  
            :readonly="submited" />
        </div>
    </div>
  </div>`,
  props: ['output'],
  data() {
    return {
      submited: false,
      command: ''
    }
  },
  computed: {
    prompt: function () {
      return this.submited ? 'Already submitted, input is ready-only now' : ''
    }
  },
  methods: {
    submit: function () {
      this.$emit('submit-to-vue')
      this.submited = true
    }
  }
})

app = new Vue({
  el: "#app",
  data: {
    childs: [{'output':'default:'}]
  },
  methods: {
    addChild: function () {
      this.childs.push({'output': this.childs.length})
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div>
    <ul>
      <li v-for="(child, index) in childs" :key="index">
        <child :output="child.output" @submit-to-vue="addChild()"></child>
      </li>
    </ul>
  </div>
</div>