vue.js 不知道如何通过 props 将数据传递给另一个组件答案

【问题标题】：vue.js I don't know how to pass data to another component via propsvue.js 不知道如何通过 props 将数据传递给另一个组件
【发布时间】：2020-10-11 04:28:39
【问题描述】：

我是vue的初学者。最近开始学习vue。我在我的 vue 组件中添加了一个道具。我认为代码似乎是正确的。但是发生了错误。有人告诉我如何将字符串或数字传递给 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>

从'./plugins/vuetify'导入vuetify；

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

const app = new Vue({
    埃尔：'#app'，
    验证，
});

sample.blade.php

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

【问题讨论】：

您的问题标题和问题正文似乎不匹配。您得到的错误是因为组件需要恰好有一个根元素。在您的情况下，您希望 <v-app> 成为该根元素。您必须将 {{ test_id }} 移动到该元素中，一切正常。此外，在 Vue 生态系统中的几乎任何地方，我们都使用 camelCase 变量来识别内容，因此您可能希望继续这种趋势以获得更简洁的代码。
非常感谢...哦，这就是编译器说“外部根元素”的原因。我明白了。

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

根中的元素太多，用包装器将它们括起来：

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

【讨论】：