无法在Vue js中将数据从main.js传递到App.vue？
在Vue.js中，可以通过props属性将数据从父组件传递到子组件。在main.js中，你可以创建一个Vue实例，并将数据作为props传递给App.vue组件。
首先，在main.js中创建一个Vue实例，并定义一个data属性，其中包含你想要传递的数据。然后，在Vue实例中使用render函数将App.vue组件渲染到页面上，并将数据作为props传递给App.vue组件。
以下是一个示例代码：
// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
data: {
message: 'Hello from main.js!'
},
render: h => h(App, {
props: {
message: this.message
}
})
}).$mount('#app')在App.vue组件中，你可以通过props属性接收传递过来的数据，并在模板中使用它。
以下是一个示例代码：
<!-- App.vue -->
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>这样，你就可以在Vue.js中将数据从main.js传递到App.vue组件了。
关于Vue.js的更多信息和使用方法，你可以参考腾讯云的Vue.js产品文档：Vue.js产品介绍。
相关·内容
我正在学习vue js，我创建了一个管理页面，当我使用路由器视图时，我能够路由，但是当我尝试href或路由器链接时，我无法加载模板，因为url被更改了。
，这是我的main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import admin from "./componen
浏览 2提问于2017-07-29得票数 4
1回答
我使用Vue已经有一段时间了，但我从来没有真正尝试过和webpack一起使用Single File Components。这就是我遇到的问题。我有两个文件: main.js (包含Vue根实例)和App.vue (这是一个单文件组件)。每个文件中的代码如下所示：
main.js：
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
components: { App, },
data(){
return {
gre
浏览 0提问于2018-12-04得票数 1
我用main.js初始化我的应用程序，
import App from './App.vue';
const store = {
items: [{
todo: 'Clean Apartment.',
},{
todo: 'Mow the lawn!',
},{
todo: 'Pick up eggs, milk & flour',
}, {
todo: 'Watch the big game',
}]
浏览 3提问于2017-02-20得票数 1
回答已采纳
我试图使用迁移构建和vite ()将Vue 2项目升级到Vue 3
我已经完成了步骤1-4 (虽然跳过了4，因为没有使用类型记录)。此时，我得到以下错误：
src/main.js:3:16: error: No loader is configured for ".vue" files: src/App.vue
尽管有这条消息，但问题似乎与@别名有关，因为如果我将import App from '@/App.vue';更改为import App from './App.vue'; in main.js，它就能正常工作。有什么想法吗？我也尝试过将别
浏览 20提问于2022-02-05得票数 2
回答已采纳
1回答
我在我的终端上安装了Vue：
sudo npm install -g @vue/cli
之后，我创建了一个项目，移动到文件夹中，并尝试运行服务器：
vue create frontend
cd frontend
npm run serve
因此，我没有从预置中更改任何内容，但无法启动服务器，并得到以下错误：
ERROR Failed to compile with 1 error 21:56:21
error in ./src/App.vue?vue&t
浏览 1提问于2022-02-15得票数 0
下面是我用main.js编写的代码
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import vueResource from 'vue-resource'
// import {bus } from './bus.js'
// import MainContent from './components/MainContent'
export const bus = new V
浏览 0提问于2017-09-12得票数 2
回答已采纳
2回答
从反应中来到Vue。在大多数情况下，有许多相似之处，但传递props似乎有点不同。我找不到关于如何使用单个文件组件来完成此操作的大量文档。我在main.js中导入应用程序的所有数据。我想知道如何才能将我的部分数据(例如currentUser )获取到ResourceInfo.vue？同样，假设这些都是单个文件组件。我需要通过<App/>部件在main.js模板选项下传递它，然后在App.vue中传递到<resource-info></resource-info>中，然后以某种方式传递到ResourceInfo.vue中吗？我也不想学习Vuex，因为我才刚开始
浏览 6提问于2016-10-24得票数 4
是否可以将道具从js模块传递到vue？
道具在组件之间传递得很好，但并不是来自实际的Vue应用程序本身：
main.js
import Vue from 'vue'
import App from './App.vue'
var myVue = new Vue({ export to other files
el: '#entry',
components: {App},
render: h => h(App),
data: function(){
return{
testSuccess:'
浏览 2提问于2019-12-05得票数 2
回答已采纳
1回答
无法使用Vuex显示数据
、、、
我是一个新的.net+vuejs学习者，我正在使用
我试图在我的项目中使用vuex从数据库中显示国家数据，但它不起作用
main.js
import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
index.js
import {
浏览 4提问于2022-05-27得票数 0
我使用vue-cli 'vue init webpack-simple my-app‘命令创建了一个新项目。在新的安装副本中，我尝试在默认情况下创建的App.vue组件中导入vue-路由器。但它给了我一个错误：'Uncaught ReferenceError: Vue is not defined‘。如果我在App.vue中再次导入vue，那么这个应用程序运行良好。但是我已经在main.js中导入了vue，那么为什么我需要在App.js中再次导入它呢？有什么办法可以使用从main.js导入的vue吗？这是我的代码：
main.js：
import Vue from 'v
浏览 1提问于2018-09-11得票数 4
回答已采纳
我和webpack一起安装了vuejs。
vue init webpack frontend
我在main.js使用vue-路由器
routes: [
{
path: '/',
name: 'Home',
component: HomeView
},
App.vue就像这里。
<template>
<div>
<div id='toparea'></div>
<router-view></router-view>
浏览 0提问于2018-09-10得票数 1
回答已采纳
我想在app.vue中显示一个不同的导航，这取决于用户是否登录。我得到了复杂的解决方案，不是有一个简单的if else解决方案或者从main.js到vue.js的传递函数吗？提前感谢 #main.js
Vue.loggedIn=true
new Vue({
router,
render: h => h(App)
}).$mount('#app')
#App.vue
<template>
<div id="app">
<div v-if="Vue.loggedIn" id="n
浏览 27提问于2019-02-18得票数 0
回答已采纳
我想在symfony 4中使用vue.js，但启动此命令时出现错误：
yarn encore dev-server --hot
错误：
ERROR Failed to compile with 3 errors 20:16:47
error in ./assets/js/componen
浏览 2提问于2018-06-19得票数 0
这是我的文件夹
+src
+components
+Logo.vue
App.vue
main.js
在我的main.js中，我导入了这个文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Logo from '@/components/Logo.vue'
createApp(App).use(router).mount('#app')
这是我的App.v
浏览 2提问于2022-06-24得票数 0
回答已采纳
我不知道如何在vue.js 2.x中使用vue-router正确设置它
我希望App.vue是一个主要的网站布局模块，其中包含基本的网站级别的东西，如页脚，徽标，主导航等。
基于路由的体系结构，它将根据此App.vue内的路由加载组件
即：/things显示列表，/things/:id显示单个项目
我使用的是来自vue-cli的webpack模板
我搞不懂main.js和App.vue，我是不是应该把路由从main.js转移到App.vue？
有人可以使用vue-router中的布局链接到一个简单的hello world吗？
import Vue from 'vue'
impo
浏览 0提问于2016-12-27得票数 0
回答已采纳
我是JavaScript和Vue.js的完全初学者。昨天，我用vue-cli启动了一个Vue.js项目，因为我的工作需要它，我遇到了一些问题。我想安装“漂亮-复选框-vue”，它目前在我的'node_module‘文件夹。
在这个包的README.md of 中，它说：
浏览器
包含脚本文件，然后用Vue.use(PrettyCheckbox)安装组件；例如：
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.j
浏览 0提问于2020-09-30得票数 0
1回答
我想在多页vue应用程序的页面之间传输数据。我试过vuex和store，但它不起作用。 我用vue.config.js文件制作了多页应用程序。每个页面都有自己的App.vue和main.js。当我将store.js导入main.js时，在那里初始化它，它只对它自己的App.vue起作用。但我需要将数据从一个页面传输到另一个页面。从一个App.vue到另一个App.vue。 (例如：-当我在一个页面上点击一个人的名字时，它应该加载这个人的个人资料和他的详细信息。(这是另一个页面))。我的计划是，当有人点击个人资料图片时，该人的详细信息将转到商店，我想在个人资料页面中检索它们。它没有起作用。我是
浏览 29提问于2021-07-17得票数 0
我有一个多页面的Vue.js应用程序，在域/合法；域/提交等方面有工作页面。我在Vue.js‘ (即自定义vue.config.js)的帮助下实现了这一点。
换句话说，我很好地完成了上面的工作。
现在，我正在尝试在新的子目录级别下实现更多嵌套的页面(除了上面已经有的那些)。即
域/org/profile1
域/org/profile2
域/org/profile3
通过自定义vue.config.js使其工作的任何方法
当前尝试vue.config.js代码：
module.exports = {
pages: {
index: {
entry: &
浏览 2提问于2020-07-16得票数 7
回答已采纳
2回答
我有一个使用Vue CLI 3创建的项目，其中包括Vue的PWA插件。我想显示一个横幅，提示用户点击应用程序中的“刷新”链接，如'Approach #3‘部分所描述的。
但是在我的Vue.js应用程序中，由于服务工作者代码是在main.js中执行的，而且我的snackbar横幅是内置到我的App.vue组件中的，所以我不知道如何在调用了服务工作者updated()事件之后触发main.js方法。
main.js (适用部分)
import Vue from 'vue';
import App from './App';
import './reg
浏览 2提问于2018-12-08得票数 5
回答已采纳
2回答
在Vue2中，我试图在axios文件中设置一个axios拦截器，以捕获来自API的任何返回401的响应，这样我就可以将用户重定向到Vue路由/sign-in。我的代码可以工作，但我依赖于将在main.js中创建的Vue实例存储在window.appvue中。
在main.js中
window.appvue = new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
在App.vue中
<script>
import...
export default { ... }
expor
浏览 3提问于2021-06-06得票数 0
回答已采纳
2回答
我正在使用：
我的main.js文件如下所示：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
和App.vue：
<template>
<div id="app">
<loading
:active.sync= "isLoading
浏览 0提问于2020-07-06得票数 1
1回答
我在一个项目中使用@vue/cli，而在我的一生中，我无法弄清楚为什么导出的变量不能工作。这是我的代码设置：
App.vue
import {somevar} from './main.js'
console.log(somevar)
main.js
import { createApp } from 'vue'
import App from './App.vue'
const somevar = "example"
export {somevar}
createApp(App).mount('#app')
当
浏览 6提问于2021-11-01得票数 1
回答已采纳
1回答
我正在与webpack，vuex和vue路由器一起开发vuejs应用程序.
我的项目结构如下所示：
组件
BlockingLayer.vue
商店
index.js
雷斯特皮
index.js
App.vue
main.js
我在App.vue中使用App.vue。App.vue有显示/隐藏BlockingLayer的方法。
，现在我希望能够从restapi index.js中触发那些方法--我该如何做呢？
我试着在restapi模块中导入App.vue --不起作用。同时，在restapi内部导入商店也是完美无缺的。在商店里导入restapi，并在那里使用它也很好。我可以做的是在存储中使用一
浏览 1提问于2020-02-26得票数 0
回答已采纳
当我运行npm run serve时，我会得到This dependency was not found错误，这与我试图在main.js中使用的router有关。我不明白为什么会发生这种情况-路由器是从src/router/router/js文件创建和导出的，并导入到main.js文件中。
main.js
import App from './App.vue'
import './assets/tailwind.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
浏览 7提问于2022-02-09得票数 0
我在我的main.js文件中导入这个简单的Vue组件(NativeScript-Vue应用程序)
App.vue
<template>
<Page>
<ActionBar title="Welcome to NativeScript-Vue!"/>
<StackLayout>
<Label class="message" :text="msg" col="0" row="0" @tap="log"/>
浏览 1提问于2019-01-11得票数 0
作为Vue.js的新手，我定义了并且，据我所知，使用了nav组件，但是，npm run serve不同意。
我得到的确切错误是：
ERROR Failed to compile with 1 errors 20:51:39
error in ./src/App.vue
Mod
浏览 11提问于2019-12-17得票数 1
回答已采纳
2回答
我在main.js导入vue-axios
main.js
import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';
const app = createApp(App);
app.use(VueAxios, axios);
app.mount('#app');
和App.vue
export default {
name:
浏览 5提问于2020-11-26得票数 4
回答已采纳
(这是后面的另一个问题：)
找到了createElement()的源代码(来自)：
function createElement (
context,
tag,
data,
children,
normalizationType,
alwaysNormalize
) { ... }
代码
main.js: (部分)
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
router
})
App.vue:
浏览 1提问于2019-07-27得票数 1
回答已采纳
我遇到了一个问题，应用程序组件和HelloWorld组件没有从main.js获得传递数据。在Vue，这应该是一件相当简单的事情。
您可以在图像中看到根元素的计数器定义为10，只是没有在任何子组件中填充。就像main.js中的第12行一样，没有任何效果。如果我点击它，上面写着“计数器:未定义”。我做错了什么？我已经用头撞墙好几个小时了。
这是我的main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
co
浏览 0提问于2018-10-02得票数 2
回答已采纳
首先，我将发出GET请求并创建Vue实例：
main.js
import Vue from 'vue';
import App from './App.vue';
let getData = () => { // currently unused - need to get promise return value into components
let url = '';
return fetch(url)
.then(response => {
return response.json();
浏览 3提问于2020-05-20得票数 0
因此，我将会话存储值设置为false，需要跟踪由Vuex管理的用户会话。我将main.js文件中的值设置为这样：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';
import store from './store'
createApp(App).use(store).use(router).mount('#app&
浏览 3提问于2022-02-18得票数 0
回答已采纳
3回答
导入.vue文件
、、、
我有main.js和app.vue文件
主js文件内部如下所示
var a = 1;
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
在App.vue文件中，我想要console.log(a)，返回错误a没有定义，为什么？出什么问题了？
浏览 0提问于2017-06-16得票数 1
1回答
我想使用vue-router，但无法将components导入到router.js中。
我还收到以下警告：[Vue Router warn]: No match found for location with path "/"
其实我不知道我做错了什么..。希望有人能帮我。
MAIN.JS
import { createApp } from 'vue';
import App from './App.vue';
import router from './router/router.js';
import '@poppe
浏览 3提问于2022-08-03得票数 0
回答已采纳
3回答
Vue新手，从命令行完成脚手架项目。目前我有：
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home
from '../components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
浏览 5提问于2018-05-30得票数 6
回答已采纳
我只是尝试构建一个vue项目，并将目录结构设置为类似于vue-cli生成的项目。我在使用vue-路由器功能后出现了一些错误。错误是：
以下是我的目录结构：
- Parcel
- src
- components
- Index.vue
- router
- index.js
- App.vue
- main.js
- node_modules
- index.html
- package.json
为了看得更清楚，我编写了源代码演示的一部分：
index.html
<body>
<div
浏览 10提问于2017-12-12得票数 2
还有第二个警告:在./src/main.js中的“导出‘默认”(导入为'Vue')中没有找到'vue'.中的警告。
它给我展示了一个空白站点，路由器可能出了问题，下面是我的App.vue的脚本(不确定)：
从“@/路由器”导出默认{}导入路由器
这是我的index.js：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
Vue.use(VueRouter)
const rou
浏览 2提问于2021-04-20得票数 2
我想设置我的图像为css文件，但它给出的错误，编译失败，我是新手在vue。
我尝试@从src进行相对寻址
body{
background: url("@/image/background.png");
}
但是它使我出错，无法编译，不管怎样，我尝试了另一种方法，它再次显示错误，无法编译。
body{
background: url("../image/background.jpg");
}
整个错误是：
Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./
浏览 81提问于2018-08-03得票数 0
我想使用v-for循环我的v-for，以便在template部分动态生成<router-link>。
目前，我不知道如何在我的router组件的template部分中处理main.js中定义的template param。
下面是脚本，我添加了注释，这里出现了问题：
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
// Import the routes file
import { routes
浏览 1提问于2018-07-28得票数 10
回答已采纳
2回答
正在尝试保存.vue文件
、、、、
我正在尝试保存.vue文件。我已经安装了vue cli。当我运行vue服务器时，在命令提示符中显示一条错误消息，显示"valid entry file be one of:main.js，index.js，app.vue，App.vue“。
浏览 5提问于2020-02-22得票数 0
我目前正在尝试在vue js中实现本地化。以下是我用main.js编写的代码。
var lang = localStorage.getItem('locale') ? localStorage.getItem('locale') : '';
if (lang === '') {
lang = 'en';
localStorage.setItem('locale', lang);
}
App.vue页面上将有两个标志图像。每当我单击这些标志时，就会触发一个函数changeLocale(
浏览 2提问于2017-06-13得票数 0
我刚开始使用vue js，我正在学习一个教程。为了开始，我输入命令行如下：
vue init webpack test-app
我插入了项目的标题，作者，我没有安装林特和测试框架。我输入项目文件夹并运行和npm，但我得到了以下错误：
ERROR Failed to compile with 2 errors 4:58:
浏览 3提问于2017-03-22得票数 0
回答已采纳
我正在创建一个Vue 3应用程序，并试图为两个组件实现一个全局事件总线来进行通信。在过去的w/Vue 2中，我将做以下工作：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
export const bus = new Vue();
new Vue({
render: h => h(App),
}).$mount('#app')
现在w/Vue 3，我知道新的Vue已经退出，createApp()在。因此，我将总线设置为
浏览 3提问于2021-12-21得票数 2
回答已采纳
假设我有一个包含以下内容的App.vue文件
<template>
<task-list>
<task>Task 1</task>
<task>Task 2</task>
</task-list>
</template>
<script>
import TaskList from './tasklist.vue'
export default {
//...
components: {
Tas
浏览 0提问于2018-02-25得票数 1
我用vue cli 3 (vue create test)创建了一个新项目，然后添加到main.js main.js模块并点击npm运行服务，如果我转到IE 11上的localhost:8080，我得到了空白页，但它在Chrome上工作.如果我从socket.io-client文件中删除main.js模块，IE将显示欢迎页面，一切正常，下面是我的main.js文件：
import Vue from 'vue'
import App from './App.vue'
import socket from 'socket.io-client';
浏览 4提问于2019-12-09得票数 1
在我的main.js中，我进行身份验证，然后填充一个数据属性。我正在尝试将该数据属性传递给App组件，但似乎不可能？ main.js import Vue from 'vue'
import App from './App.vue'
new Vue({
data: {
test: 'test'
},
//render: h => h(App)
render: h => h(App, { props: { 'test': this.test }})
}).$mount('#app
浏览 149提问于2021-06-18得票数 2
回答已采纳
1回答
在我正在处理的应用程序的Vue组件中，使用lodash.debounce调用一个方法，以减少调用的次数。但我注意到，如果在已取消的方法中发生任何错误，则不会在组件级别或应用程序级别向错误观察人员报告。
是否有任何方法来报告脱钩方法中的错误？
组件方法：
methods: {
doMethod: function() {
throw new Error();
},
doMethodDebounce: _.debounce(function() {
throw new Error();
}, 100)
},
以下列方式听取错误：
在App.vue中：
errorCa
浏览 0提问于2019-02-22得票数 2
回答已采纳
2回答
我正在使用安装了vue-router的Vue-cli，在我的App.vue中，我有一个<router-link to="/about" >About</router-link>，它将在点击时显示关于组件的内容。现在，我想将props数据从 App.vue传递到About.vue组件。在<router-link to="/about" :myprops="myprops">About</router-link>中添加:myprops="myprops“不起作用，这就是为什么我在App.vue
浏览 0提问于2018-07-09得票数 3
回答已采纳
1回答
使用最新版本的Vue 我一直在试着让Vuelidate工作 我在互联网上看到的每个使用这种"Main.js“代码的指南:从”Vue“导入vue； import Vuelidate from 'vuelidate';
import App from './app/App';
Vue.use(Vuelidate);
new Vue({
el: '#app',
render: h => h(App)
}); 虽然我的main.js看起来像这样： import { createApp } from 'vue&
浏览 22提问于2021-04-24得票数 0
1回答
在使用vue-cli 3.x配置项目之后，我在main.js中定义了这个组件。
顺便问一下，未知的自定义元素：-您正确注册了组件吗？对于递归组件，请确保提供"name“选项.。
我无法继续进行上述错误。如何使用全局组件？
密码..。
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.component('staticComponent', {
template: '<
浏览 0提问于2018-12-18得票数 0
我试图使用"vue.config.js“文件加载一个全局scss
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/common.scss";`
}
}
}
}
如果在我的App.vue中使用任何代码打开样式标记，如下所示：
App.vue
<style lang="scss">
#app{
display: block;
}
</style>
浏览 2提问于2021-03-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
