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

Posted 2023-02-23

【中文标题】向 VueJS + Vue Router 中的组件发送数据

【英文标题】：Send data to components in 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 , ]

【参考方案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。