Vue3 pass the data from Parent to Child-CodePudding

I bumped into this error when trying to pass the data from parent to child.

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>

My source code is here below, just simply pass the data to Child from Parent.

I guess this is related with text root nodes? if so how can I fix this?

<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>

CodePudding user response：

Since your template is placed directly in the HTML, the parentData cannot be bound and generates the warning.

You should bind it with kebab-case like this

<child parent-data="Data From Parent" ></child>

Check the Vue Docs DOM Template Parsing Caveats for details.

BTW, also good to know:

The warning comes while you component does not have a single root node.

To prevent the warning you can put a <div> around your component's content, like this:

<div>Child component test : [[ parentData ]]<br/></div>

Or use inheritAttrs: false to suppress it.

And here is a great answer clarifying the problem with the warning.

Example

Here is the playground showing it. The first parentData="Data From Parent" generates the warning and does not work. The second parentData="Data From Parent" works.

const Child = {
    props:['parentData'],
    template: '#child_comp',
    mounted() {
        console.log(this.parentData);
    },
    delimiters: ['[[', ']]']  
}
Vue.createApp({
    components:{
        "child": Child,
    }
}).mount('#app')

<div id="app">  
  <child parentData="Data From Parent" ></child>
  <child parent-data="Data From Parent" ></child>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/x-template" id="my-component">
</script>
<template id="child_comp">
    Child component test : [[ parentData ]]<br/>
</template>