Vue3 pass the data from Parent to Child

Question

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>

You probably want `:parentData=""`, with the colon. – ceejayoz Feb 03 '23 at 17:03 — ceejayoz, Feb 03 '23 at 17:03

Tolbxela · Accepted Answer · 2023-02-03T17:18:41.123

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>

Wow, it's quite tricky to understand.. Witouout your help, it takes so much time to understand. thankyou very much! — whitebear, Feb 04 '23 at 05:33

Vue3 pass the data from Parent to Child

1 Answers1

Example