Javascript Vuejs如何使用道具将数据从main.js传递到App.vue

我遇到了一个问题，应用程序组件和HelloWorld组件无法从main.js获取传递的数据。在Vue中，这应该是一件相当简单的事情。

您可以在图中看到，根元素的计数器定义为10，只是没有填充到任何子组件中。就像main.js中的第12行一样，它没有任何作用。如果我点击，它会显示“计数器：未定义”。我做错了什么？我已经把头撞在墙上几个小时了

这是我的main.js

从“Vue”导入Vue
从“./App.vue”导入应用程序
Vue.config.productionTip=false
新Vue({
组件：{App}，
数据：{
柜台：10
},
模板：“”，
//计算：{
//counterInc:函数（）{
//退回这个柜台++
//  }
//},
方法：{
更新计数器（x）{
这个计数器=x
}
},
渲染：h=>h（应用程序）
}).$mount（“#应用程序”）

这是我的App.vue

从“./components/HelloWorld.vue”导入HelloWorld
导出默认值{
名称：“应用程序”，
道具：[“计数器”]，
组成部分：{
你好世界
},
}
#应用程序{
字体系列：“Avenir”、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

因此我个人并不经常使用

渲染

功能，但要使代码正常工作，可以在实际的html页面中提供初始模板，并将Vue实例装载到其中。我在这里做了一个密码笔：

要点是删除

render

函数，将以下内容添加到html

<div id="app">
  <app :counter="counter" />
</div>

---

离开

$mount（“#app”）

将其装载到您提供的html中。

Matti已经给了您一个答案，但您可能需要考虑您的项目结构。目标不应该是将数据从根组件传递到最低的子组件。 在您的情况下，您有两种选择：

使用事件从组件发出事件，以更新另一个组件中的状态。有关更多信息，请参阅

使用vuex之类的状态管理。Vuex用于全局处理您的状态。您可以使用所有组件的getter访问状态，而无需手动将数据传递给需要访问数据的每个组件。此外，vuex还提供操作/突变，允许您更新状态。有关更多信息，请参阅

---

对于小型项目，vuex可能会有太多的开销以获得相同的结果。但是，如果您的项目越来越大，那么在通过多个组件传递数据时，很难知道组件中发生了什么

如果您不想使用包含vue build的模板编译器，则可以实现如下

render

函数来传递属性值：

render: h => h(App, {
  props: {
    'counter': 10
  }
})

---

（来源：

render

函数的

h

参数是

createElement

的别名）

是否确定此代码不会生成错误？是的，100%确定，我正在chrome控制台中查看，没有发现错误，也是“vue cli service SERVER'未返回任何错误。由于删除渲染函数时收到警告，因此无法删除该函数。-[Vue warn]：在模板编译器不可用的情况下，您正在使用仅运行时版本的Vue。可以将模板预编译为呈现函数，也可以使用编译器包含的构建。由于无法删除呈现，我进行了一些研究，创建了一个vue.config.js，其内容为

//vue.config.js module.exports={configureWebpack:{resolve:{alias:{vue$：'vue/dist/vue.esm.js}

在根目录中，删除render:行并应用编辑。它现在工作得完美无缺。使用包含编译器的构建与我使用的方式相比，有哪些注意事项？我认为它们在官方文档网站上有点不同，但基本上我是如何理解的，带有模板编译器的构建有点“重”如果您自己编译所有模板，那么没有的模板可以用作更轻的版本，这在某些COR和内容安全情况下会很有帮助。“将数据从根组件传递到最低的子组件不应该是目标。”为什么我不应该有这样做的目标？我在main.js中发生了一些需要传播给孩子们的事情。你是说孩子们不应该知道他们的父母和父母的数据？我会调查vuex。非常感谢。的确，组件应该只对自身负责。除非你有一个类似ListComponent和ItemComponent的东西，那么你可以像上面提到的那样传递你的道具。但是，如果变得更复杂，比如将道具传递给各个组件，或者在深层次上，通常最好使用events或vuex。希望现在更清楚了。