提交 b657bfe4 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

feat(render function): 补充 render 自定义组件更新 props 示例及测试 issue:11752

上级 aaa79b4c
<template> <template>
<view> <view>
<text class="uni-common-mt bold component-for-h-function">component for h()</text> <text class="uni-common-mt bold component-for-h-function">component for h()</text>
<slot /> <text id="comp-for-h-function-msg">{{msg}}</text>
</view> <slot />
</template> </view>
</template>
<script>
export default {
props: {
msg: {
type: String
}
}
}
</script>
...@@ -5,7 +5,7 @@ const msg = ref('default msg') ...@@ -5,7 +5,7 @@ const msg = ref('default msg')
// 故意外部声明为UTSJSONObject // 故意外部声明为UTSJSONObject
const msgProps = { class: 'uni-common-mt msg', style: { color: 'blue' } } const msgProps = { class: 'uni-common-mt msg', style: { color: 'blue' } }
const render = ():VNode => h('view', { class: 'page' }, [ const render = ():VNode => h('view', { class: 'page' }, [
h(CompForHFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]), h(CompForHFunction, { msg: msg.value }, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),
h('text', msgProps, msg.value), h('text', msgProps, msg.value),
h( h(
'button', 'button',
......
<script lang="uts"> <script lang="uts">
import CompForHFunction from '@/components/CompForHFunction.uvue' import CompForHFunction from '@/components/CompForHFunction.uvue'
// 故意外部声明为UTSJSONObject // 故意外部声明为UTSJSONObject
const msgProps = { class: 'uni-common-mt msg', style: { color: 'blue' } } const msgProps = { class: 'uni-common-mt msg', style: { color: 'blue' } }
export default { export default {
data() { data() {
return { return {
msg: 'default msg' msg: 'default msg'
} }
}, },
render(): VNode { render() : VNode {
return h('view', { class: 'page' }, [ return h('view', { class: 'page' }, [
h(CompForHFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]), h(CompForHFunction, { msg: this.msg }, () : VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),
h('text', msgProps, this.msg), h('text', msgProps, this.msg),
h( h(
'button', 'button',
{ {
class: 'uni-common-mt btn', class: 'uni-common-mt btn',
type: 'primary', type: 'primary',
onClick: () => { onClick: () => {
this.msg = 'new msg' this.msg = 'new msg'
} }
}, },
'click' 'click'
) )
]) ])
} }
} }
</script> </script>
<style> <style>
.btn { .btn {
color: red; color: red;
} }
</style> </style>
\ No newline at end of file
...@@ -25,12 +25,16 @@ describe('render-function render', () => { ...@@ -25,12 +25,16 @@ describe('render-function render', () => {
let msgEl = await page.$('.msg') let msgEl = await page.$('.msg')
expect(await msgEl.text()).toEqual('default msg') expect(await msgEl.text()).toEqual('default msg')
compForHFunctionMsg = await page.$('#comp-for-h-function-msg')
expect(await compForHFunctionMsg.text()).toEqual('default msg')
const btnEl = await page.$('.btn') const btnEl = await page.$('.btn')
expect(await btnEl.property('type')).toBe('primary') expect(await btnEl.property('type')).toBe('primary')
await btnEl.tap() await btnEl.tap()
msgEl = await page.$('.msg') msgEl = await page.$('.msg')
expect(await msgEl.text()).toEqual('new msg') expect(await msgEl.text()).toEqual('new msg')
compForHFunctionMsg = await page.$('#comp-for-h-function-msg')
expect(await compForHFunctionMsg.text()).toEqual('new msg')
} }
it('render options API', async () => { it('render options API', async () => {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册