当以编程方式创建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吗?如何提供?文档中没有关于这一点的内容。
1条答案
按热度按时间t3irkdon1#
我无法解释这种行为,但我可以注意到,
propsData
应该与Vue.extend
一起使用你的组件也不是真正的动态的,它们是硬编码在模板中的。
为什么不简单点?就像下面的操场。
您还可以通过这种方式创建动态组件,使用
v-for
迭代组件prop。像这样
一个二个一个一个