vue 2-以编程方式创建组件和插槽

dba5bblo  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(268)

当以编程方式创建vue(2.17.4)组件时,它不会从域节点获取数据。如果使用new Vue(),它会从域节点获取数据。对于使用Vue.component或Vue.extend创建的组件,props和域节点内容会被忽略。
我举了一个简单的例子来说明这个问题

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>

正如你所看到的,只有第一个组件的props和content是从domnode中获取的。我可以使用propsData选项添加props,但是我可以提供dom node的content吗?如何提供?文档中没有关于这一点的内容。

t3irkdon

t3irkdon1#

我无法解释这种行为,但我可以注意到,propsData应该与Vue.extend一起使用

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

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

你的组件也不是真正的动态的,它们是硬编码在模板中的。
为什么不简单点?就像下面的操场。
您还可以通过这种方式创建动态组件,使用v-for迭代组件prop。
像这样

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

一个二个一个一个

相关问题