Übergeben von Requisiten an Vue.js-Komponenten, die vom Vue-Router instanziiert wurden

Angenommen ich habe ein Vue.js Komponente wie folgt:

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

Und ich möchte es zu benutzen, wenn eine route in vue-router abgestimmt ist wie dieses:

router.map({
    '/bar': {
        component: Bar
    }
});

Normalerweise um pass 'myProps", um die Komponenten würde ich etwas wie das hier tun:

Vue.component('my-bar', Bar);

und im html:

<my-bar my-props="hello!"></my-bar>

In diesem Fall der router die Zeichnung automatisch auf die Komponente in der router-view-element bei der route abgestimmt ist.

Meine Frage ist nun, in diesem Fall, wie kann ich pass den Requisiten um die Komponente?

InformationsquelleAutor der Frage Robert | 2016-06-21

  1. 33
    <router-view :some-value-to-pass="localValue"></router-view>

    und in Ihre Komponenten einfach hinzufügen prop:

    props: {
      someValueToPass: String
    },

    vue-router passen prop Komponente

    InformationsquelleAutor der Antwort lukpep

  2. 5
     const User = {
      props: ['id'],
      template: '<div>User {{ id }}</div>'
    }
    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User, props: true }

        //for routes with named views, you have to define the props option for each named view:
        {
          path: '/user/:id', 
          components: { default: User, sidebar: Sidebar },
          props: { default: true, sidebar: false }
        }
      ]
    })

    Objekt-Modus

    const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

    Dass ist die offizielle Antwort.
    link

    InformationsquelleAutor der Antwort aboutqx

  3. 1

    In den router,

    const router = new VueRouter({
  routes: [
    { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } }
  ]
})

    Innen die <Bar /> Komponente,

    var Bar = Vue.extend({
    props: ['authorName'],
    template: '<p>Hey, {{ authorName }}</p>'
});

    InformationsquelleAutor der Antwort Jegadesh B S

Schreibe einen Kommentar