Skip to content

Commit c665a68

Browse files
kazuponyyx990803
authored andcommitted
pass vnode raw data in functional component (#3168)
1 parent b3710e0 commit c665a68

File tree

2 files changed

+63
-3
lines changed

2 files changed

+63
-3
lines changed

src/core/vdom/create-component.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,10 @@ export function createComponent (
7171
if (Ctor.options.functional) {
7272
return Ctor.options.render.call(
7373
null,
74-
parent.$createElement, // h
75-
propsData || {}, // props
76-
normalizeChildren(children) // children
74+
parent.$createElement, // h
75+
propsData || {}, // props
76+
normalizeChildren(children), // children
77+
data // data
7778
)
7879
}
7980

test/unit/features/options/functional.spec.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,63 @@ describe('Options functional', () => {
2121
expect(vm.$el.innerHTML).toBe('<div>qux bar</div>')
2222
}).then(done)
2323
})
24+
25+
it('should let vnode raw data pass through', done => {
26+
const onValid = jasmine.createSpy('valid')
27+
const vm = new Vue({
28+
data: { msg: 'hello' },
29+
template: `<div>
30+
<validate field="field1" @valid="onValid">
31+
<input type="text" v-model="msg">
32+
</validate>
33+
</div>`,
34+
components: {
35+
validate: {
36+
functional: true,
37+
props: ['field'],
38+
render (h, props, children, { on }) {
39+
props.child = children[0]
40+
return h('validate-control', { props, on })
41+
}
42+
},
43+
'validate-control': {
44+
props: ['field', 'child'],
45+
render () {
46+
return this.child
47+
},
48+
mounted () {
49+
this.$el.addEventListener('input', this.onInput)
50+
},
51+
destroyed () {
52+
this.$el.removeEventListener('input', this.onInput)
53+
},
54+
methods: {
55+
onInput (e) {
56+
const value = e.target.value
57+
if (this.validate(value)) {
58+
this.$emit('valid', this)
59+
}
60+
},
61+
// something validation logic here
62+
validate (val) {
63+
return val.length > 0
64+
}
65+
}
66+
}
67+
},
68+
methods: { onValid }
69+
}).$mount()
70+
document.body.appendChild(vm.$el)
71+
const input = vm.$el.querySelector('input')
72+
expect(onValid).not.toHaveBeenCalled()
73+
waitForUpdate(() => {
74+
input.value = 'foo'
75+
triggerEvent(input, 'input')
76+
}).then(() => {
77+
expect(onValid).toHaveBeenCalled()
78+
}).then(() => {
79+
document.body.removeChild(vm.$el)
80+
vm.$destroy()
81+
}).then(done)
82+
})
2483
})

0 commit comments

Comments
 (0)