Question

我已经使用Vue已有一段时间了，但是我从未真正尝试过将单个文件组件与webpack一起使用。这是我遇到的问题。我有2个文件：main.js（包含Vue根实例）和App.vue（单个文件组件。每个文件中的代码如下：

main.js：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  components: { App, },
  data(){
    return {
        greeting: "Hello World!",
     }
  },
  render: h => h(App),

});

App.vue：

<template>
  <div id="app">
    {{greeting}}
  </div>
</template>

<script>
export default {
  name: 'App',
  
  }
  
 </script>

请注意，我使用的是webpack，main.js文件旨在作为入口点。该代码捆绑到一个名为bundle.js的文件中。

现在，我的问题是，当App.vue中的模板呈现时，它没有显示“ Hello Word”，这是{{greeting}}的值。我希望从main.js中的根Vue实例传递来的数据应可用于App.vue组件。

当我将{{greeting}}放入index.html文件时，该文件未进行评估，该文件链接到bundle.js（main.js的捆绑版本）

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Nothing</title>
    <script src="/dist/build.js"></script>
  </head>
  <body>
    <div id="app"></div>
      {{greeting}}

  </body>
</html>

这是否意味着根vue实例中的数据在任何地方都不可用？我该怎么办？

Answer 1

greeting必须位于组件的data中。这与SFC（单个文件组件）无关，只是Vue模板的工作方式：它们从组件的数据中读取。

因此，您需要做的是将data移至适当的组件，该组件与您要使用的模板相关联。

<template>
  <div id="app">
    {{ greeting }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return { greeting: 'Hello World!', }
  },
}  
</script>

如何将数据从Vue实例传递到单个文件组件

1 个答案: