需要船體一個data()內(nèi)的對象到另一個頁面。

<player-card v-for="(note, key) in sortedtNodes":imgurl="note.avarUrl":playerId="note.playerId":title="note.playerName":label="note.kIndex"@click.native="$router.push({name: 'player_topics', params: { playerId: note.playerId, playerName: note.playerName, dateFroHome: this.date }})"></player-card>

在跳轉(zhuǎn)到的頁面卻并沒有獲取到，手動打印一下是這樣的結(jié)果：

嘗試將參數(shù)設(shè)置為固定值：dateFroHome: '2017-04-28'這樣后端是可以獲取到的。所以這里確定是this指針問題。

所以這里的dateFroHome: this.date 的this是player-card組件里的this吧。

問題找出來了，怎么解決呢？

看了下官方文檔《組件數(shù)據(jù)流》中的內(nèi)容：

簡單來說vue是不允許將父組件中的對象引用直接傳遞給子組件的，為了應(yīng)對這種情況，vue提供了兩種方法：

1.定義一個局部變量，并用 prop 的值初始化它：

props: ['initialCounter'], data: function () {return { counter: this.initialCounter } }

?

2.定義一個計(jì)算屬性，處理 prop 的值并返回。

props: ['size'], computed: {normalizedSize: function () {return this.size.trim().toLowerCase()} }

可以看這樣就能保證父組件的屬性this.xxx都保留在父組件中給你了。

所以我修改了一下項(xiàng)目：

在父組件的computed中定義一個啥啥啥：

computed: {thisDate: function () {var this_date = this.date;return this_date;}}

然后直接傳遞這個thisDate就可以了：

@click.native="$router.push({name: 'player_topics', params: { playerId: note.playerId, playerName: note.playerName, dateFroHome: thisDate }})"

?

轉(zhuǎn)載于:https://www.cnblogs.com/guazi/p/6798329.html

總結(jié)

以上是生活随笔為你收集整理的记一次vue2路由参数传递this指针问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。