setup.uvue

<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>
			<RenderFunction :str='str' :count='count' :obj='obj' @compUpdateObj='compUpdateObj' :isShow='true' />
			<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>
	import RenderFunction from './RenderFunction.uvue'
	import Foo from './Foo.uvue'
	export default {
		components: {
			RenderFunction,
			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>