个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 14:15:35 25 4
gpt4 key购买 nike

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

主要.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),

});

应用程序.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}} 放入链接到 bundle.js(main.js 的捆绑版本)的 index.html 文件中时，它没有被评估

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 实例中的数据在任何地方都不可用？我该怎么办？

最佳答案

问候语 需要在组件的data 中。这与 SFC(单文件组件)无关，这只是 Vue 模板的工作方式:它们从组件的数据中读取。

所以您需要做的是将 data 移动到适当的组件，该组件与您尝试使用的模板相关联。

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

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

关于javascript - 如何将数据从 Vue 实例传递到单个文件组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53611027/

25 4 0
文章推荐： c# - 异常记录和发送电子邮件
文章推荐： c# - 使用 Async CTP 在单个函数中异步 HTTP 发布数据
文章推荐： c# - ServiceStack MVC 3+ 示例
文章推荐： javascript - 使用 jquery 更改选项卡标题？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com