vue. js Я не знаю, как передавать данные другому компоненту через props

Question

Я новичок vue. Недавно я начал изучать vue. Я добавил опору в свой компонент vue. Я считаю, что код правильный. но произошла ошибка. Кто-нибудь скажет мне, как передать String или Number в childComponent и как его проверить.

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>

Answer 1

Слишком много элементов в root, заключите их в оболочку, например:

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