Skip to content

Commit 02ff792

Browse files
yyx990803yyx990803
committedOct 13, 2017
fix: fix props-passing regression
fix #1800
1 parent 7ac16f7 commit 02ff792

File tree

4 files changed

+35
-28
lines changed

4 files changed

+35
-28
lines changed
 

‎examples/route-props/Hello.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<h2 class="hello">Hello {{name}}</h2>
3+
<h2 class="hello">Hello {{name}} {{ $attrs }}</h2>
44
</div>
55
</template>
66

@@ -14,4 +14,4 @@ export default {
1414
}
1515
}
1616
}
17-
</script>
17+
</script>

‎examples/route-props/app.js

+2-14
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,6 @@ function dynamicPropsFn (route) {
1111
}
1212
}
1313

14-
const Child = {
15-
name: 'child',
16-
props: { name: { default: 'name' }},
17-
template: `<div><h2 class="hello">Hello {{ name }}</h2></div>`
18-
}
19-
20-
const Parent = {
21-
name: 'parent',
22-
components: { Child },
23-
template: `<child v-bind="$attrs"></child>`
24-
}
25-
2614
const router = new VueRouter({
2715
mode: 'history',
2816
base: __dirname,
@@ -31,7 +19,7 @@ const router = new VueRouter({
3119
{ path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
3220
{ path: '/static', component: Hello, props: { name: 'world' }}, // static values
3321
{ path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props
34-
{ path: '/attrs', component: Parent, props: { name: 'attrs' }}
22+
{ path: '/attrs', component: Hello, props: { name: 'attrs' }}
3523
]
3624
})
3725

@@ -47,7 +35,7 @@ new Vue({
4735
<li><router-link to="/dynamic/1">/dynamic/1</router-link></li>
4836
<li><router-link to="/attrs">/attrs</router-link></li>
4937
</ul>
50-
<router-view class="view"></router-view>
38+
<router-view class="view" foo="123"></router-view>
5139
</div>
5240
`
5341
}).$mount('#app')

‎src/components/view.js

+18-7
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,17 @@ export default {
6868
}
6969

7070
// resolve props
71-
data.props = resolveProps(route, matched.props && matched.props[name])
72-
data.attrs = {}
73-
74-
for (const key in data.props) {
75-
if (!('props' in component) || !(key in component.props)) {
76-
data.attrs[key] = data.props[key]
77-
delete data.props[key]
71+
let propsToPass = data.props = resolveProps(route, matched.props && matched.props[name])
72+
if (propsToPass) {
73+
// clone to prevent mutation
74+
propsToPass = data.props = extend({}, propsToPass)
75+
// pass non-declared props as attrs
76+
const attrs = data.attrs = data.attrs || {}
77+
for (const key in propsToPass) {
78+
if (!component.props || !(key in component.props)) {
79+
attrs[key] = propsToPass[key]
80+
delete propsToPass[key]
81+
}
7882
}
7983
}
8084

@@ -102,3 +106,10 @@ function resolveProps (route, config) {
102106
}
103107
}
104108
}
109+
110+
function extend (to, from) {
111+
for (const key in from) {
112+
to[key] = from[key]
113+
}
114+
return to
115+
}

‎test/e2e/specs/route-props.js

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const $attrs = ' { "foo": "123" }'
2+
13
module.exports = {
24
'route-props': function (browser) {
35
browser
@@ -6,23 +8,29 @@ module.exports = {
68
.assert.count('li a', 5)
79

810
.assert.urlEquals('http://localhost:8080/route-props/')
9-
.assert.containsText('.hello', 'Hello Vue!')
11+
.assert.containsText('.hello', 'Hello Vue!' + $attrs)
1012

1113
.click('li:nth-child(2) a')
1214
.assert.urlEquals('http://localhost:8080/route-props/hello/you')
13-
.assert.containsText('.hello', 'Hello you')
15+
.assert.containsText('.hello', 'Hello you' + $attrs)
1416

1517
.click('li:nth-child(3) a')
1618
.assert.urlEquals('http://localhost:8080/route-props/static')
17-
.assert.containsText('.hello', 'Hello world')
19+
.assert.containsText('.hello', 'Hello world' + $attrs)
1820

1921
.click('li:nth-child(4) a')
2022
.assert.urlEquals('http://localhost:8080/route-props/dynamic/1')
21-
.assert.containsText('.hello', 'Hello ' + ((new Date()).getFullYear() + 1)+ '!')
23+
.assert.containsText('.hello', 'Hello ' + ((new Date()).getFullYear() + 1)+ '!' + $attrs)
2224

2325
.click('li:nth-child(5) a')
2426
.assert.urlEquals('http://localhost:8080/route-props/attrs')
25-
.assert.containsText('.hello', 'Hello attrs')
27+
.assert.containsText('.hello', 'Hello attrs' + $attrs)
28+
29+
// should be consistent
30+
.click('li:nth-child(4) a')
31+
.click('li:nth-child(5) a')
32+
.assert.urlEquals('http://localhost:8080/route-props/attrs')
33+
.assert.containsText('.hello', 'Hello attrs' + $attrs)
2634

2735
.end()
2836
}

0 commit comments

Comments
 (0)