Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 402
Star 3
Fork 10
H
hello-uvue
提交 175b3a26 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

refactor(component instance): setup function

上级 9dffe41e
隐藏空白更改
内联 并排
Showing with 189 addition and 110 deletion
pages.json
浏览文件 @ 175b3a26
......@@ -443,7 +443,12 @@
"navigationBarTitleText": "provide 组合式 API"
}
},
{
"path": "pages/component-instance/setup-function/setup-function",
"style": {
"navigationBarTitleText": "setup()"
}
},
{
"path": "pages/component-instance/circular-reference/circular-reference",
......@@ -563,12 +568,6 @@
}
},
// #endif
{
"path": "pages/composition/setup/setup",
"style": {
"navigationBarTitleText": "setup"
}
},
{
"path": "pages/examples/nested-component-communication/nested-component-communication-options",
"style": {
......
pages/component-instance/setup-function/Foo.uvue 0 → 100644
浏览文件 @ 175b3a26
<template>
<view>
<text class="mt-10">this is component Foo for setup function</text>
<slot></slot>
<view class="flex justify-between flex-row mt-10">
<text>hasDefaultSlot:</text>
<text id="has-default-slot">{{ hasDefaultSlot }}</text>
</view>
</view>
</template>
<script lang="uts">
export default {
setup(_, context) {
const hasDefaultSlot = context.slots['default'] !== null
return {
hasDefaultSlot
}
}
}
</script>
pages/composition/setup/RenderFunction.uvue → pages/component-instance/setup-function/RenderFunction.uvue
浏览文件 @ 175b3a26
<template>
<view class="uni-common-mt">
<view class="mt-10">
<text>this is Render Function component</text>
</view>
</template>
<script>
<script lang='uts'>
export default {
props: {
str: {
......@@ -16,28 +16,28 @@
obj: {
type: Object as PropType<UTSJSONObject>,
}
},
},
emits: ['compUpdateObj'],
setup(props, context) {
const compUpdateObj = () => {
context.emit('compUpdateObj')
}
// TODO: 待支持 expose 后补充示例
// const compCount = ref(0)
// const compIncrement = () => {
// compCount.value++
// }
}
// TODO: 待支持 expose 后补充示例
// const compCount = ref(0)
// const compIncrement = () => {
// compCount.value++
// }
// context.expose({compCount, compIncrement})
return () : VNode => h('view', { class: 'uni-common-mt' }, [
h('text', { class: 'uni-common-mt' }, 'this is Foo component text with h function'),
// h('text', { class: 'uni-common-mt' }, `compCount: ${compCount.value}`),
h('text', { id: 'props-str', class: 'uni-common-mt' }, `props.str: ${props.str}`),
h('text', { id: 'props-count', class: 'uni-common-mt' }, `props.count: ${props.count}`),
h('text', { id: 'props-obj-str', class: 'uni-common-mt' }, `props.obj['str']: ${props.obj!['str']}`),
h('text', { id: 'props-obj-num', class: 'uni-common-mt' }, `props.obj['num']: ${props.obj!['num']}`),
h('text', { id: 'props-obj-bool', class: 'uni-common-mt' }, `props.obj['bool']: ${props.obj!['bool']}`),
h('button', { id: 'comp-update-obj-btn', class: 'uni-common-mt', onClick: compUpdateObj }, 'comp update obj'),
h('text', { id: 'context-attrs-is-show', class: 'uni-common-mt' }, `context.attrs.isShow: ${context.attrs['isShow']}`),
return () : VNode => h('view', { class: 'mt-10' }, [
h('text', { class: 'mt-10' }, 'this is render function component text with h function'),
// h('text', { class: 'mt-10' }, `compCount: ${compCount.value}`),
h('text', { id: 'props-str', class: 'mt-10' }, `props.str: ${props.str}`),
h('text', { id: 'props-count', class: 'mt-10' }, `props.count: ${props.count}`),
h('text', { id: 'props-obj-str', class: 'mt-10' }, `props.obj['str']: ${props.obj!['str']}`),
h('text', { id: 'props-obj-num', class: 'mt-10' }, `props.obj['num']: ${props.obj!['num']}`),
h('text', { id: 'props-obj-bool', class: 'mt-10' }, `props.obj['bool']: ${props.obj!['bool']}`),
h('button', { id: 'comp-update-obj-btn', class: 'mt-10', onClick: compUpdateObj }, 'comp update obj'),
h('text', { id: 'context-attrs-is-show', class: 'mt-10' }, `context.attrs.isShow: ${context.attrs['isShow']}`),
])
}
}
......
pages/composition/setup/setup.test.js → pages/component-instance/setup-function/setup-function.test.js
浏览文件 @ 175b3a26
// TODO web端
const PAGE_PATH = '/pages/composition/setup/setup'
const PAGE_PATH = '/pages/component-instance/setup-function/setup-function'
describe('options setup', () => {
let page
beforeAll(async () => {
......@@ -9,21 +7,21 @@ describe('options setup', () => {
})
it('basic', async () => {
const str = await page.$('#str')
expect(await str.text()).toBe('str: default str')
expect(await str.text()).toBe('default str')
const num = await page.$('#num')
expect(await num.text()).toBe('num: 0')
expect(await num.text()).toBe('0')
const bool = await page.$('#bool')
expect(await bool.text()).toBe('bool: false')
expect(await bool.text()).toBe('false')
const count = await page.$('#count')
expect(await count.text()).toBe('count: 0')
expect(await count.text()).toBe('0')
const objStr = await page.$('#obj-str')
expect(await objStr.text()).toBe('obj.str: obj default str')
expect(await objStr.text()).toBe('obj default str')
const objNum = await page.$('#obj-num')
expect(await objNum.text()).toBe('obj.num: 0')
expect(await objNum.text()).toBe('0')
const objBool = await page.$('#obj-bool')
expect(await objBool.text()).toBe('obj.bool: false')
expect(await objBool.text()).toBe('false')
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
const propsStr = await page.$('#props-str')
......@@ -43,7 +41,7 @@ describe('options setup', () => {
await incrementBtn.tap()
const count = await page.$('#count')
expect(await count.text()).toBe('count: 1')
expect(await count.text()).toBe('1')
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
const propsCount = await page.$('#props-count')
expect(await propsCount.text()).toBe('props.count: 1')
......@@ -53,11 +51,11 @@ describe('options setup', () => {
await updateObjBtn.tap()
const objStr = await page.$('#obj-str')
expect(await objStr.text()).toBe('obj.str: obj new str')
expect(await objStr.text()).toBe('obj new str')
const objNum = await page.$('#obj-num')
expect(await objNum.text()).toBe('obj.num: 100')
expect(await objNum.text()).toBe('100')
const objBool = await page.$('#obj-bool')
expect(await objBool.text()).toBe('obj.bool: true')
expect(await objBool.text()).toBe('true')
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
const propsObjStr = await page.$('#props-obj-str')
......@@ -88,6 +86,6 @@ describe('options setup', () => {
const defaultSlotInFoo = await page.$('#default-slot-in-foo')
expect(await defaultSlotInFoo.text()).toBe('default slot in Foo')
const hasDefaultSlot = await page.$('#has-default-slot')
expect(await hasDefaultSlot.text()).toBe('hasDefaultSlot: true')
expect(await hasDefaultSlot.text()).toBe('true')
})
})
\ No newline at end of file
pages/component-instance/setup-function/setup-function.uvue 0 → 100644
浏览文件 @ 175b3a26
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="page">
<view class="flex justify-between flex-row mt-10">
<text>str:</text>
<text id="str">{{ str }}</text>
</view>
<view class="flex justify-between flex-row mt-10">
<text>num:</text>
<text id="num">{{ num }}</text>
</view>
<view class="flex justify-between flex-row mt-10">
<text>bool:</text>
<text id="bool">{{ bool }}</text>
</view>
<view class="flex justify-between flex-row mt-10">
<text>count:</text>
<text id="count">{{ count }}</text>
</view>
<button class="mt-10" id="increment-btn" @click="increment">
increment count
</button>
<view class="flex justify-between flex-row mt-10">
<text>obj.str:</text>
<text id="obj-str">{{ obj['str'] }}</text>
</view>
<view class="flex justify-between flex-row mt-10">
<text>obj.num:</text>
<text id="obj-num">{{ obj['num'] }}</text>
</view>
<view class="flex justify-between flex-row mt-10">
<text>obj.bool:</text>
<text id="obj-bool">{{ obj['bool'] }}</text>
</view>
<button class="mt-10" id="update-obj-btn" @click="updateObj">
update obj
</button>
<!-- #ifdef APP -->
<RenderFunction
:str="str"
:count="count"
:obj="obj"
@compUpdateObj="compUpdateObj"
:isShow="true" />
<!-- #endif -->
<Foo>
<text class="mt-10" id="default-slot-in-foo">default slot in Foo</text>
</Foo>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
// #ifdef APP
import RenderFunction from './RenderFunction.uvue'
// #endif
import Foo from './Foo.uvue'
export default {
components: {
// #ifdef APP
RenderFunction,
// #endif
Foo
},
setup() {
const count = ref(0)
// 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}
const increment = () => { count.value++ }
const obj = reactive({
str: 'obj default str',
num: 0,
bool: false,
})
const updateObj = () => {
obj['str'] = 'obj new str'
obj['num'] = 100
obj['bool'] = true
}
const compUpdateObj = () => {
obj['str'] = 'obj new str by comp update'
obj['num'] = 200
obj['bool'] = true
}
return {
str: 'default str',
num: 0,
bool: false,
count,
increment,
obj,
updateObj,
compUpdateObj
}
}
}
</script>
pages/composition/setup/Foo.uvue 已删除 100644 → 0
浏览文件 @ 9dffe41e
<template>
<view>
<text class="uni-common-mt">this is component Foo for options setup</text>
<slot></slot>
<text class="uni-common-mt" id="has-default-slot">hasDefaultSlot: {{hasDefaultSlot}}</text>
</view>
</template>
<script>
export default {
setup(_, context) {
const hasDefaultSlot = context.slots['default'] !== null
return {
hasDefaultSlot
}
}
}
</script>
\ No newline at end of file
pages/composition/setup/setup.uvue 已删除 100644 → 0
浏览文件 @ 9dffe41e
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="page">
<text class='uni-common-mt' id="str">str: {{ str }}</text>
<text class='uni-common-mt' id="num">num: {{ num }}</text>
<text class='uni-common-mt' id="bool">bool: {{ bool }}</text>
<text class='uni-common-mt' id="count">count: {{count}}</text>
<button class='uni-common-mt' id="increment-btn" @click="increment">increment</button>
<text class='uni-common-mt' id="obj-str">obj.str: {{ obj['str'] }}</text>
<text class='uni-common-mt' id="obj-num">obj.num: {{ obj['num'] }}</text>
<text class='uni-common-mt' id="obj-bool">obj.bool: {{ obj['bool'] }}</text>
<button class='uni-common-mt' id="update-obj-btn" @click="updateObj">update obj</button>
<!-- #ifdef APP -->
<RenderFunction :str='str' :count='count' :obj='obj' @compUpdateObj='compUpdateObj' :isShow='true' />
<!-- #endif -->
<Foo>
<text class="uni-common-mt" id="default-slot-in-foo">default slot in Foo</text>
</Foo>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
// #ifdef APP
import RenderFunction from './RenderFunction.uvue'
// #endif
import Foo from './Foo.uvue'
export default {
components: {
// #ifdef APP
RenderFunction,
// #endif
Foo
},
setup() {
const count = ref(0)
// 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}
const increment = () => { count.value++ }
const obj = reactive({
str: 'obj default str',
num: 0,
bool: false,
})
const updateObj = () => {
obj['str'] = 'obj new str'
obj['num'] = 100
obj['bool'] = true
}
const compUpdateObj = () => {
obj['str'] = 'obj new str by comp update'
obj['num'] = 200
obj['bool'] = true
}
return {
str: 'default str',
num: 0,
bool: false,
count,
increment,
obj,
updateObj,
compUpdateObj
}
}
}
</script>
\ No newline at end of file
pages/index/index.uvue
浏览文件 @ 175b3a26
......@@ -368,6 +368,11 @@ export default {
url: 'nextTick-composition'
},
]
},
{
id: 'setup-function',
name: 'setup()',
url: 'setup-function/setup-function'
}
] as Page[]
},
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或