<template>
  <el-card>
    parent<br/>
    pCount: {{pCount}}<br/>
    grandSonCount: {{grandSonCount}}
    <el-button @click="grandSonCount++">改变grandSonCount</el-button>

    <SonCom v-model:pCount="pCount"/>
    teleport<el-switch v-model="switchTel"></el-switch>
    <TeleportCom v-if="showTel" :disabled="switchTel"/>
  </el-card>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    toRefs,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    computed,
    nextTick,
    provide
  } from "vue";
  import SonCom from './son.vue'
  import TeleportCom from './teleport.vue'

  export default defineComponent({
    name: "",
    components: {
      SonCom,
      TeleportCom
    },
    setup() {
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
      const state = reactive({
        showTel: false,
        switchTel: false,
        pCount: 0,
      });
      const grandSonCount = ref(0)
      provide('grandSonCount', grandSonCount)
      onMounted(() => {
        nextTick(() => {
          state.showTel = true
        })
      })
      return {
        ...toRefs(state),
        grandSonCount
      }
    },
  });
</script>
<style scoped lang="scss">
</style>
