我在尝试将数据从父级传递到子级时遇到了这个错误。
vue@next:1616 [Vue warn]: Extraneous non-props attributes (parentdata) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <Child parentdata="Data From Parent" >
at <App>
我的源代码在下面,只是简单地将数据从父节点传递给子节点.
我猜这是与文本根节点有关?如果是这样,我该如何解决这个问题?
<div id="app">
<child parentData="Data From Parent"></child>
</div>
<template id="child_comp">
Child component test [[ parentData]]
</template>
<script>
const Child = {
props:['parentData'],
template: '#child_comp',
data (){
return {
}
},
mounted() {
console.log(this.parentData);
},
delimiters: ['[[', ']]']
}
Vue.createApp({
components:{
"child":Child,
},
methods:{
}
}).mount('#app')
</script>
1条答案
按热度按时间nhaq1z211#
由于模板直接放在HTML中,因此无法绑定
parentData
并生成警告。应该像这样将其与
kebab-case
绑定有关详细信息,请查看Vue Docs DOM模板解析注意事项。
顺便说一句,也很高兴知道:
当组件没有单个根节点时,将出现该警告。
为了防止出现警告,您可以在组件的内容周围加上一个
<div>
,如下所示:或者使用
inheritAttrs: false
来抑制它。这里有一个great answer,它澄清了警告中的问题。
示例
这里是展示它的操场。第一个
parentData="Data From Parent"
生成警告并且不工作。第二个parentData="Data From Parent"
工作。一个二个一个一个