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>
      <!-- #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>