vue.js I don't know how to pass data to another component via props

Question

I am a beginner of vue. I’ve recently started studying vue. I added a prop in my vue component. I reckon the code seems to be correct. but an error happened. Is anyone tell me how to pass the String or Number to childComponent and how to check it.

ERROR in ./resources/js/components/App.vue?vue&type=template&id=1da0bc8e& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vuetify-loader/lib/loader.js??ref--11-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/App.vue?vue&type=template&id=1da0bc8e&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  text "test_id" outside root element will be ignored.

  1  |  
     |   
  2  |  {{test_id}}
     |  ^^^^^^^^^^^^
  3  |    <v-app>

App.vue

<template>
{{test_id}}
  <v-app>
  </v-app>
</template>

<script>

  export default {
    name: 'App',
    components: {
      Test
    },
    props: {
      test_id : String
    },
  }
</script>

import vuetify from './plugins/vuetify';

Vue.component('stack', require('./components/App.vue').default);

const app = new Vue({
    el: '#app',
    vuetify,
});

sample.blade.php

<script src=" {{ mix('js/test.js') }}" defer></script>
<div id="app">
<stack test_id="111"></stack>
</div>

Your question title and question body don't seem to match up. The error you get, is because a component needs to have exactly one root element. In your case, you want <v-app> to be that root element. You have to move the {{ test_id }} into that element and everything works fine. Also, pretty much anywhere in the Vue ecosystem we use camelCase variables to identify stuff, so you might want to continue that trend for cleaner code. — Sumurai8
Thank you very much... Oh, that's why the compiler says "outside root element". I see. — tomato

Karl L Karl L · Accepted Answer · 2020-06-21T08:25:10

Too many elements in the root, enclose them with a wrapper like:

<template>
  <div>
   {{test_id}}
   <v-app>
   </v-app>
  </div>
</template>

vue.js I don't know how to pass data to another component via props

1 Answers