Область видимости Vue / Vue-router - PullRequest
Новая
       8

Область видимости Vue / Vue-router

0 голосов
/ 30 июня 2018 
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: {...}
})

Моя цель состоит в том, чтобы router прослушивал данные в MainComponent, но есть проблемы с областями видимости - MainComponent не определено.

Есть ли способ заставить router прослушивать данные в MainComponent с помощью этой структуры?

1 Ответ

0 голосов
/ 30 июня 2018

Вы можете увидеть следующий пример 

//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>'
});
...