Question

我无法将数据从app传递给compnent。渲染后它只显示清晰的html，没有来自vue的数据。一切正常，但没有数据（（

来自app.js的代码：

var Series = Vue.component('Series', require('./components/Series.vue'),{
    props: {
        series: {
            type: Array,
            default: []
        },
        images: {
            type: Array,
            default: []
        },
        showPhotos: {
            type: Boolean,
            default: false
        }
    }
});
const Bar = { template: '<div>bar</div>' }
const Foo = { template: '<div>foo</div>' }

const routes = [
  { path: '/weedings', component: Series },
  { path: '/', component: Foo },
  { path: '/family', component: Foo },
  { path: '/other', component: Foo },
  { path: '/videos', component: Bar },
  { path: '/blog', component: Bar },
  { path: '/about', component: Foo },
  { path: '/contacts', component: Bar }
]
const router = new VueRouter({
  routes // short for routes: routes
});
var app = new Vue({
    el: "#app",
    router,
    data: {
        series: [],
        currentSerie: 0,
        images: [],
        showPhotos: false
    },
    methods: {
        fetchSeries: function(){
            this.$http.get('/api/fetchSeries').then((response) => {
                this.series = response.body
            }, (response) => {
                alert("fail")
            });
        },
        fetchPhotos: function(id){
            this.showPhotos = false;
            this.$http.get('/api/fetchPhotos/'+id).then((response) => {
                this.images = response.body
                this.showPhotos = true;
                $("html, body").animate({ scrollTop: 60 }, "500");
            }, (response) => { 
                alert("fail")
            });
        },
        photos: function(id){
            this.fetchPhotos(id)
        }
    },
    created: function(){
        this.fetchSeries()
        setTimeout(function(){ require('./custom'); }, 1000);
    }

});

当我不使用vue-router时，一切正常。我知道我可以用这种方式将数据传递给组件：<my-component :artribute="value"></my-component>，但在这种情况下IDK如何传递数据。

Answer 1

使用这样的功能模式：

{
    path: '/weedings',
    component: Series,
    props: () => (
        { series: app.series, images: app.images, showPhotos: app.showPhotos }
    )
}

查看JSFiddle中的工作示例。

Answer 2

在你的路线声明中你应该添加道具

`const routes = [
    { path: '/weedings', component: Series, props: true}]`

这里提到：Passing props to Vue.js components instantiated by Vue-router

将数据发送到VueJS + Vue Router中的组件

2 个答案: