[英]Vue / vue-router scoping
import ExpenseView from './path'
import template from './path'
const MainComponent = new Vue({
el: '#app',
data: {
expense: [{ description: 'expense description', amount: 14.99, _id: 'l;dkfjg;ladfjg;klafjg;l' }],
},
router: new VueRouter({
routes: [
{ path: '/dash', component: ExpenseView, props: { default: true, expenses: MainComponent.expense } },
]
}),
template,
created() {...},
methods: {...},
computed: {...}
})
My goal is to have the router
listen to the data in MainComponent
but there are scoping issues - MainComponent
is not defined. 我的目标是让
router
侦听MainComponent
的数据,但存在作用域问题MainComponent
未定义。
Is there a way to get the router
listening to the data in MainComponent
with the way this is structured? 有没有一种方法可以使
router
以结构化的方式侦听MainComponent
的数据?
You can see the following example 您可以看到以下示例
//you can try the following code //index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import RSSFeed from '@/components/RSSFeed.vue' export default new Router({ routes: [ { path: '/rss-feed', name: 'RSSFeed', component: RSSFeed, props: { authorName: 'Robert' } }, ] }) //RSSFeed.vue <template> <ol id="feed"> {{authorName}} </ol> </template> <script> import Post from './Post' export default { props: ['authorName'], data () { return { items: [ { "title":"Vuejs Nodejs", "pubDate":"20-07-2018", "description":"Leading vuejs nodejs", "link":"https://hoanguyenit.com" } ], errors: [] } } } </script>
Example //in router const router = new VueRouter({ routes: [ { path: 'YOUR__PATH', component: Home, props: { authorName: 'Robert' } } ] }) //in Home.vue //And inside the <Home /> component, var Home = Vue.extend({ props: ['authorName'], template: '<p>Hey, {{ authorName }}</p>' });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.