<script setup>语法糖无法获取组件类型调用方法

zz541843

May 1st 2022

Version

3.2.33

Reproduction link

Steps to reproduce

直接看图片吧，文档上拷贝的例子，create-vue刚创的代码 IDE是webstorm2022.1，总不可能是这个有毛病吧...

What is expected?

What is actually happening?

liulinboyi

May 1st 2022

可以试一试VSCcode 插件Vue Language Features (Volar)

SFC在线例子

<script lang="ts">
import MyModal from './MyModal.vue'
import { ref,nextTick } from 'vue'
import type { InstanceType } from 'vue'

export default {
  components: {
    MyModal
  },
  setup() {
    const modal1 = ref()
    // const modal1 = ref<InstanceType<typeof MyModal>>()
    const openModal = () => {
      debugger
      modal1.value?.open() // 正常
    }
    return { openModal,modal1 }
  }
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='openModal'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

<script setup lang="ts">
import { ref,nextTick } from 'vue'
import MyModal from './MyModal.vue'

// const modal1= ref(null)
const modal1 = ref<InstanceType<typeof MyModal>>()
const childOpen=()=>{
  debugger
  modal1.value?.open()  // 正常
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='childOpen'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

zz541843

May 1st 2022

可以试一试VSCcode 插件Vue Language Features (Volar)

SFC在线例子

<script lang="ts">
import MyModal from './MyModal.vue'
import { ref,nextTick } from 'vue'
import type { InstanceType } from 'vue'

export default {
  components: {
    MyModal
  },
  setup() {
    const modal1 = ref()
    // const modal1 = ref<InstanceType<typeof MyModal>>()
    const openModal = () => {
      debugger
      modal1.value?.open() // 正常
    }
    return { openModal,modal1 }
  }
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='openModal'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

<script setup lang="ts">
import { ref,nextTick } from 'vue'
import MyModal from './MyModal.vue'

// const modal1= ref(null)
const modal1 = ref<InstanceType<typeof MyModal>>()
const childOpen=()=>{
  debugger
  modal1.value?.open()  // 正常
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='childOpen'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

所以结论是webstorm不适合vue3的开发吗你的第二个例子这行不写，也获取不到MyModal这个组件的类型啊

zz541843

May 1st 2022

还是说没有直接调用另一个组件的方法的写法，文档这里省略了template的代码？

liulinboyi

May 1st 2022

可以试一试VSCcode 插件Vue Language Features (Volar)

SFC在线例子

<script lang="ts">
import MyModal from './MyModal.vue'
import { ref,nextTick } from 'vue'
import type { InstanceType } from 'vue'

export default {
  components: {
    MyModal
  },
  setup() {
    const modal1 = ref()
    // const modal1 = ref<InstanceType<typeof MyModal>>()
    const openModal = () => {
      debugger
      modal1.value?.open() // 正常
    }
    return { openModal,modal1 }
  }
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='openModal'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

<script setup lang="ts">
import { ref,nextTick } from 'vue'
import MyModal from './MyModal.vue'

// const modal1= ref(null)
const modal1 = ref<InstanceType<typeof MyModal>>()
const childOpen=()=>{
  debugger
  modal1.value?.open()  // 正常
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='childOpen'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

所以结论是webstorm不适合vue3的开发吗你的第二个例子这行不写，也获取不到MyModal这个组件的类型啊

这个不知道，待后续其他大佬回复吧

liulinboyi

May 1st 2022

可以试一试VSCcode 插件Vue Language Features (Volar)

SFC在线例子

<script lang="ts">
import MyModal from './MyModal.vue'
import { ref,nextTick } from 'vue'
import type { InstanceType } from 'vue'

export default {
  components: {
    MyModal
  },
  setup() {
    const modal1 = ref()
    // const modal1 = ref<InstanceType<typeof MyModal>>()
    const openModal = () => {
      debugger
      modal1.value?.open() // 正常
    }
    return { openModal,modal1 }
  }
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='openModal'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

<script setup lang="ts">
import { ref,nextTick } from 'vue'
import MyModal from './MyModal.vue'

// const modal1= ref(null)
const modal1 = ref<InstanceType<typeof MyModal>>()
const childOpen=()=>{
  debugger
  modal1.value?.open()  // 正常
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='childOpen'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

所以结论是webstorm不适合vue3的开发吗你的第二个例子这行不写，也获取不到MyModal这个组件的类型啊

关于这个 也获取不到MyModal这个组件的类型啊 具体请看文档

zz541843

May 1st 2022

可以试一试VSCcode 插件Vue Language Features (Volar)

SFC在线例子

<script lang="ts">
import MyModal from './MyModal.vue'
import { ref,nextTick } from 'vue'
import type { InstanceType } from 'vue'

export default {
  components: {
    MyModal
  },
  setup() {
    const modal1 = ref()
    // const modal1 = ref<InstanceType<typeof MyModal>>()
    const openModal = () => {
      debugger
      modal1.value?.open() // 正常
    }
    return { openModal,modal1 }
  }
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='openModal'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

<script setup lang="ts">
import { ref,nextTick } from 'vue'
import MyModal from './MyModal.vue'

// const modal1= ref(null)
const modal1 = ref<InstanceType<typeof MyModal>>()
const childOpen=()=>{
  debugger
  modal1.value?.open()  // 正常
}
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="https://cn.vuejs.org/images/logo.svg" width="125" height="125"/>
        <button @click='childOpen'>点击调用子组件方法</button>
        <MyModal ref="modal1" />
        <div class="wrapper">
            <!-- <HelloWorld msg="You did it!"/> -->
            <nav>
                <!-- <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink> -->
            </nav>
            <button @click="aa">aa</button>
        </div>
    </header>

    <!-- <RouterView/> -->
</template>

<style>
</style>

所以结论是webstorm不适合vue3的开发吗你的第二个例子这行不写，也获取不到MyModal这个组件的类型啊

关于这个 也获取不到MyModal这个组件的类型啊 具体请看文档

老哥，这方式我知道，看标题，官方文档的上面实例是在