向 VueJS + Vue Router 中的组件发送数据答案

【问题标题】：Send data to components in VueJS + Vue Router向 VueJS + Vue Router 中的组件发送数据
【发布时间】：2017-05-23 11:41:35
【问题描述】：

我无法将数据从应用程序传递到组件。渲染后它只显示清晰的 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 如何传递数据。

【问题讨论】：

你在使用任何预处理器吗？ Vue.component()中的第二个参数是什么，我从来没有见过一个签名包含三个参数的组件注册，但我可能是错的。
我使用 webpack (Laravel Elixir)。看这里来自 laravel 的默认 app.js github.com/laravel/laravel/blob/master/resources/assets/js/…
在您的链接中，Vue.component() 调用有两个正确的参数，这里您的代码有三个。
而且您不应该多次调用Vue.component 来注册同一个组件（Series 在顶部注册一次，然后在路由定义中重新注册）。
@MathewJibin，我的错，忘了编辑这个。 var Series = Vue.component('Series', require('./components/Series.vue'),{ props: { series: { type: Array, default: [] }, images: { type: Array, default: [] }, showPhotos: { type: Boolean, default: false } } }); const routes = [ { path: '/weedings', component: Series }, ]

标签： laravel vue-component vuejs2 vue.js vue-router

【解决方案1】：

像这样使用函数模式：

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

检查JSFiddle中的工作示例。

注意：您必须使用vuex 作为应用程序中所有组件的集中存储，才能实现更复杂的场景。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

来自文档：当 props 设置为 true 时，route.params 将被设置为组件 props。