无法访问 VueJS 中的根数据
[英] Can't access root data in VueJS
本文介绍了无法访问 VueJS 中的根数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我在 stackoverflow 上的第一篇文章，如果我做错了什么，请提前道歉.我的问题；
我已经设置了一个 VueJS 项目，我正在尝试访问我从另一个组件放入 App.vue 的数据.为此，我使用 this.$root.count 为例，但它返回 undefined.
Main.js:
从'vue'导入Vue从 'vue-router' 导入 VueRouter从'./App'导入应用程序Vue.use(VueRouter);const 路由器 = 新的 VueRouter({模式:'历史'，路线:[{小路: '/'，name: '家',组件:函数(解析){require(['./components/Hello.vue'], 解决)}}, {路径:'/race-pilot',name: 'racePilot',组件:函数(解析){require(['./components/RacePilot.vue'], 解决)}}});新的 Vue({el: '#app',路由器，模板:'<App/>',组件:{应用}});
App.vue:
<div><div class="menu" ref="menu"><router-link :to="{ name: 'home' }">Home</router-link><router-link :to="{ name: 'racePilot' }">Race Pilot</router-link>
<div id="应用程序"><路由器视图></路由器视图>
</模板><style src="./assets/css/app.scss" lang="scss"></style><脚本>从 './components/Hello' 导入 Hello导出默认{名称:'应用'，成分: {你好},数据 () {返回 {计数:'0'}}}
RacePilot.vue:
<div class="race-pilot">
</模板><脚本>导出默认{name: 'RacePilot',安装(){console.log(this.$root.count);}}
所以最后一个日志返回未定义.但是，如果我记录 this.$root，我确实得到了对象.有人有什么想法吗?提前致谢！
解决方案
Vuex 很好，但如果你只是想在基于路由器的应用程序中向所有视图公开一个属性，你可以在路由器上设置它-查看.
然后你的视图组件只需要接受它作为一个道具.
出口默认{道具:[计数"]，name: 'RacePilot',安装(){控制台日志(this.count)；}}
It's my first post on stackoverflow, so sorry in advance if I do something incorrectly. My question;
I've setup a VueJS project, and I'm trying to reach data that I put in the App.vue from another component. To do this, I use this.$root.count for example, but it returns undefined.
Main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: function (resolve) {
require(['./components/Hello.vue'], resolve)
}
}, {
path: '/race-pilot',
name: 'racePilot',
component: function (resolve) {
require(['./components/RacePilot.vue'], resolve)
}
}
});
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
App.vue:
<template>
<div>
<div class="menu" ref="menu">
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'racePilot' }">Race Pilot</router-link>
</div>
<div id="app">
<router-view></router-view>
</div>
</div>
</template>
<style src="./assets/css/app.scss" lang="scss"></style>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
},
data () {
return {
count: '0'
}
}
}
</script>
RacePilot.vue:
<template>
<div class="race-pilot">
</div>
</template>
<script>
export default {
name: 'RacePilot',
mounted() {
console.log(this.$root.count);
}
}
</script>
So the last log returns undefined. However, if I log this.$root, I do get the object. Anybody any idea? Thanks in advance!
解决方案
Vuex is fine and all, but if you just want to expose a property to all of your views in a router based app, you can set it on the router-view.
<router-view :count="count"></router-view>
Then your view component just needs to accept it as a prop.
export default {
props:["count"],
name: 'RacePilot',
mounted() {
console.log(this.count);
}
}
这篇关于无法访问 VueJS 中的根数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
