vue2 - Programmatically create component and slots

Question

When creating vue (2.17.4) components programmatically, it does not take data from the domnode. If you use new Vue() it does. For components created using Vue.component or Vue.extend, the props and domnode content is simply ignored.

I made a simple example to explain the issue

const Test = Vue.component('Test',{
  name: 'Test',
  props: ['prop'],
  template: `<div class="hello">
                SLOTCONTENT: <slot name="name">default from template</slot><br>
                PROPS: {{$props}}
             </div>`

});

new Vue({el:'#el1'})
new Test({el:'#el2'})
new Test({el:'#el3', propsData:{prop:'el3prop from propsdata'}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>

Component created with new Vue()
<Test id="el1" prop="el1prop">
  <template #name>el1 (from markup)</template>
</Test>
<br><br> Component created with new Test()
<Test id="el2" prop="el2prop">
  <template #name>el2 (from markup)</template>
</Test>
<br><br> Component created with new Test() propsData supplied
<Test id="el3" prop="el3prop">
  <template #name>el3 (from markup)</template>
</Test>

As you see, only for the first component props and content are taken from the domnode. I can add props using the propsData option, but can I supply the dom node content and how? The documentation has nothing about this.

Answer 1

I cannot explain the behavior, but I can notice, that propsData should be used together with Vue.extend

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

Your components are also not really dynamic. They are hardcoded in the template.

Then why not do it simpler? Like in the playground below.

You can also create dynamic components this way iterating over component props with v-for.

Like this

<Test v-for="component in components" />

Vue.component('Test',{
  name: 'Test',
  props: ['prop'],
  template: `
<div class="hello">
  SLOTCONTENT: <slot name="name">default from template</slot><br>
  PROPS: {{$props}}
</div>`
});

new Vue({el:'#app'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>
<div id="app">
  Component created with new Vue()
  <Test id="el1" prop="el1prop">
    <template #name>el1 (from markup)</template>
  </Test>
  <br>
  <Test id="el2" prop="el2prop">
    <template #name>el2 (from markup)</template>
  </Test>
  <br>
  <Test id="el3" prop="el3prop">
    <template #name>el3 (from markup)</template>
  </Test>
</div>