feat: dynamic component

components/Bar.uvue

+<template>
+	<text class="component-bar">this is component Bar</text>
+</template>

components/Foo.uvue

+<template>
+	<text class="component-foo">this is component Foo</text>
+</template>
\ No newline at end of file

pages.json

@@ -248,6 +248,12 @@
         "enablePullDownRefresh": false
       }
     },
+		{
+		  "path": "pages/rendering/component/component",
+		  "style": {
+		    "navigationBarTitleText": "component"
+		  }
+		},
     {
       "path": "pages/examples/nested-component-communication/nested-component-communication",
       "style": {

pages/index.uvue

@@ -215,11 +215,16 @@
                 url: 'render',
                 enable: false,
               },
-              {
-                name: 'slots',
-                url: 'slots',
-                enable: true,
-              },
+              {
+                name: 'slots',
+                url: 'slots',
+                enable: true,
+              },
+							{
+							  name: 'component',
+							  url: 'component',
+							  enable: true,
+							},
             ] as PageItem[],
           },
           {

pages/rendering/component/component.test.js

+describe('/pages/rendering/component/component', () => {
+	let page
+	beforeAll(async () => {
+		page = await program.reLaunch('/pages/rendering/component/component')
+		await page.waitFor('view')
+	})
+	it('basic', async () => {
+		let fooList = await page.$$('.component-foo')
+		expect(fooList.length).toBe(2)
+		expect(await fooList[0].text()).toBe('this is component Foo')
+		expect(await fooList[1].text()).toBe('this is component Foo')
+		
+		let barList= await page.$$('.component-bar')
+		expect(barList.length).toBe(0)
+		
+		await page.callMethod('changeCurrentComponent')
+		
+		fooList = await page.$$('.component-foo')
+		expect(fooList.length).toBe(0)
+		
+		barList= await page.$$('.component-bar')
+		expect(barList.length).toBe(2)
+		expect(await barList[0].text()).toBe('this is component Bar')
+		expect(await barList[1].text()).toBe('this is component Bar')
+	})
+});
\ No newline at end of file

pages/rendering/component/component.uvue

+<template>
+	<view class="container">
+		<component :is="currentComponentStr" />
+		<component :is="currentComponentInstance" />
+		<button @click="changeCurrentComponent">change current component</button>	
+	</view>
+</template>
+
+<script lang="uts">
+	import Foo from '../../../components/Foo.uvue'
+	import Bar from '../../../components/Bar.uvue'
+	export default {
+		components: {
+			Foo,
+			Bar
+		},
+		data() {
+			return {
+				currentComponentStr: 'Foo',
+				currentComponentInstance: Foo,
+			}
+		},
+		methods: {
+			changeCurrentComponent() {
+				if (this.currentComponentStr === 'Foo') {
+					this.currentComponentStr = 'Bar'
+					this.currentComponentInstance = Bar
+				} else {
+					this.currentComponentStr = 'Foo'
+					this.currentComponentInstance = Foo
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	.item {
+		display: flex;
+		flex-direction: row;
+		margin: 15px;
+		border: #eee solid 1px;
+	}
+</style>
\ No newline at end of file