Передача данных в динамический c компонент из родительского компонента в Vue. js

Question

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

Например: Родительский компонент:

<div id="app">
  <template v-for="(component, index) in components">
      <component :is="component" :key="index"></component>
  </template>
  <button @click="add()">Add Component</button>
</div>

Dynami c Компонент:

 let dynamicComponent = {
  template: `
    <p>Welcome {{ msg }}!</p>
  `,
  data () {
    return {
      msg: 'home'
    }
  },
}

const App = new Vue({
  el: '#app',

  data: {
    components: [
      dynamicComponent
    ]
  },

  methods: {
    add () {
      this.components.push(dynamicComponent);
    },
  }
});

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

В этом случае msg свойство dynamicComponent из родительского компонента

Answer 1

Кажется, вы могли бы сделать это:

Родительский шаблон:

<div id="app">
  <template v-for="(component, index) in components">
      // Add :msg to pass 'msg' to child component.
      <component :is="component" :key="index" :msg="msg"></component>
  </template>
  <button @click="add()">Add Component</button>
</div>

Js:

let dynamicComponent = {
   props: ['msg'], //<-- Specify the child will receive a prop 'msg'
   template: `<p>Welcome {{ msg }}!</p>`
}

const App = new Vue({
   el: '#app',
   data: {
      components: [
         dynamicComponent
      ],
      msg: 'Hello' //<-- Set the value of 'msg'
   },

   methods: {
      add() {
         this.components.push(dynamicComponent);
      },
   }
});

Codepen

Answer 2

Вы должны использовать что-то вроде props:['msg'] в компоненте

let dynamicComponent = {
  template: `
    <p>Welcome {{ msg2 }}, {{ msg }}!</p>
  `,
  props:['msg'],
  data () {
    return {
      msg2: 'component message'
    }
  },
}

const App = new Vue({
  el: '#app',
  data: {
    components: [
      dynamicComponent
    ],
    parentMsg:'parent message'
  },

  methods: {
    add () {
      this.components.push(dynamicComponent);
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/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>
  <input type="text" v-model="parentMsg">
</div>