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

feat(composition api): provide and inject

上级 daec24b2
...@@ -601,6 +601,13 @@ ...@@ -601,6 +601,13 @@
{ {
"navigationBarTitleText" : "组件生命周期" "navigationBarTitleText" : "组件生命周期"
} }
},
{
"path" : "pages/composition-api/dependency-injection/provide/provide",
"style" :
{
"navigationBarTitleText" : "依赖注入"
}
} }
], ],
"tabBar": { "tabBar": {
......
<template>
<view>
<text>inject page</text>
<text class="uni-common-mt msg">msg: {{msg}}</text>
<text class="uni-common-mt num">num: {{num}}</text>
<text class="uni-common-mt obj">obj: {{obj}}</text>
<text class="uni-common-mt arr">arr: {{arr}}</text>
<text class="uni-common-mt fn">fn: {{(fn as () => string)()}}</text>
<text class="uni-common-mt has-injection-context">hasInjectionContext:
{{checkHasInjectionContextRes}}</text>
<button class="uni-common-mt check-has-injection-context-btn" @click="checkHasInjectionContext">check hasInjectionContext</button>
</view>
</template>
<script setup>
const msg = inject('msg')
const num = inject('num')
const obj = inject('obj')
const arr = inject('arr')
const fn = inject('fn')
const checkHasInjectionContextRes = ref('')
const checkHasInjectionContext = () => {
checkHasInjectionContextRes.value = `${hasInjectionContext()}`
}
checkHasInjectionContext()
</script>
\ No newline at end of file
const PAGE_PATH = '/pages/composition-api/dependency-injection/provide/provide'
describe('provide-inject-hasInjectionContext', () => {
let page = null
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('baisc', async () => {
const msg = await page.$('.msg')
expect(await msg.text()).toBe('msg: hello')
const num = await page.$('.num')
expect(await num.text()).toBe('num: 0')
const obj = await page.$('.obj')
expect(await obj.text()).toBe('obj: {"a":1}')
const arr = await page.$('.arr')
expect(await arr.text()).toBe('arr: [1,2,3]')
const fn = await page.$('.fn')
expect(await fn.text()).toBe('fn: hello')
const hasInjectionContext = await page.$('.has-injection-context')
expect(await hasInjectionContext.text()).toBe('hasInjectionContext: true')
const checkHasInjectionContextBtn = await page.$('.check-has-injection-context-btn')
await checkHasInjectionContextBtn.tap()
expect(await hasInjectionContext.text()).toBe('hasInjectionContext: false')
})
})
\ No newline at end of file
<template>
<view class="page">
<inject-comp />
</view>
</template>
<script setup>
import InjectComp from './inject.uvue';
provide('msg', 'hello');
provide('num', 0);
provide('obj', { a: 1 });
provide('arr', [1, 2, 3]);
provide('fn', () : string => 'hello');
</script>
\ No newline at end of file
...@@ -324,17 +324,33 @@ ...@@ -324,17 +324,33 @@
name: '生命周期', name: '生命周期',
open: false, open: false,
pages: [ pages: [
{ {
name: '页面生命周期', name: '页面生命周期',
url: 'page-lifecycle', url: 'page-lifecycle',
enable: true, enable: true,
}, },
{ {
name: '组件生命周期', name: '组件生命周期',
url: 'component-lifecycle', url: 'component-lifecycle',
enable: true, enable: true,
}, },
] ]
}, {
id: 'dependency-injection',
name: '依赖注入',
open: false,
pages: [
{
name: 'provide',
url: 'provide',
// #ifdef APP
enable: true,
// #endif
// #ifdef WEB
enable: false,
// #endif
}
]
} }
] as PageList[] ] as PageList[]
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册