Блог

Например, у нас есть компонент Woof , написанный с помощью Vue 2 и @vue/composition-api .

 <template>
  <div ref="borkElement" />
</template>

<script lang="ts">
  import { defineComponent, ref } from '@vue/composition-api';

  export default defineComponent({
    name: 'Woof',

    setup() {
      const borkElement = ref<HTMLDivElement | null>(null);

      return {
        borkElement
      };
    }
  });
</script>
 

Поэтому я хотел бы получить доступ к элементу borkElement за пределами Woof компонента. Он доступен во время выполнения, но TypeScript выдает ошибку.

 <template>
  <Woof ref="woofComponent" />
</template>

<script lang="ts">
  import { defineComponent, ref } from '@vue/composition-api';
  import Woof from './Woof.vue';

  export default defineComponent({
    setup() {
      const woofComponent = ref<typeof Woof | null>(null);

      return {
        woofComponent
      };
    },

    mounted() {
      console.log(this.woofComponent?.borkElement);
      //                              ^^^^^^^^^^^ property doesn't exist
    }
  });
</script>