Создавайте динамические компоненты c одновременно, используя цикл for - PullRequest
Новая
       5

Создавайте динамические компоненты c одновременно, используя цикл for

0 голосов
/ 23 января 2020

Я хочу добавить данные в динамический c компонент из родительского компонента

Например:

Давайте возьмем число в качестве данных, которые я хочу передать в динамику c component.

o / p этого фрагмента:

Приветствие родительского сообщения!

Приветствие 5

Приветствие 5

Добро пожаловать 5

Добро пожаловать 5

Добро пожаловать 5

ожидаемое значение o / p должно быть :

Добро пожаловать родительское сообщение!

Добро пожаловать 1

Добро пожаловать 2

Добро пожаловать 3

Добро пожаловать 4

Добро пожаловать 5 

let dynamicComponent = {
      template: `
        <p>Welcome {{ msg2 }}</p>
      `,
      props:['msg'],
      data () {
        return {
          msg2: this.msg
        }
      },
    }
    
    const App = new Vue({
      el: '#app',
      data(){
      return{
       parentMsg:'parent message',
       components: [
          dynamicComponent
        ],
      }
      },
    
      methods: {
        add () {
        for(let i=1;i<6;i++){
        this.parentMsg = i;
          this.components.push(dynamicComponent)
          }
        },
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <template v-for="(component, index) in components">
      <component :msg="parentMsg" :is="component" :key="index"></component>
    </template>
    <button @click="add()">Add Component</button>
    </div>

Проблема возникает, когда я хочу, чтобы компоненты сразу, используя цикл for, все компоненты имели одинаковые данные, то есть, что '5', и я не могу Понимаю, почему это происходит, я пытался использовать немедленный вызов выражения функции в for-l oop, но, похоже, он также не работает.

Ответы [ 2 ]

1 голос
/ 23 января 2020

Вы обновляете parentMsg и добавляете новый компонент в для l oop. Vue обновляет DOM после завершения для l oop. К тому времени, когда значение l oop закончится, ваше значение parentMsg будет равно 5. Вот почему вы видите все Welcome 5.

. Путь к достижению того, что вы пытаетесь, заключается в добавлении scheduling компонентов в Vue * * функцию вызова

* 1010. * Я обновил ваш код ниже, чтобы получить желаемый результат: 
methods: {
    add () {
      this.addOneItem(1);
    },
    addOneItem(i) {
      if(i >= 6) return;
      this.parentMsg = i++
      this.components.push(Try)
      this.$nextTick(() => this.addOneItem(i));
    }
  }
}

Здесь сначала я добавляю один компонент, а затем планирую следующий компонент, который будет добавлен в обратном вызове $nextTick.

Подробнее о $nextTick можно прочитать здесь

0 голосов
/ 23 января 2020

Проблема с этим 

:msg="parentMsg"

Все компоненты Dynami c имеют реквизит msg, связанный с parentMsg, это связывание. Чтобы объяснить это немного, они все используют один и тот же parentMsg, когда он меняется, скажем, с 1 на 2, он меняется везде, где он связан, и так далее, пока не достигнет 5. Что вы хотите сделать, это использовать index вместо parentMsg, например это 

:msg="index"
...