[Vue 3.4] App 中的 _instance 问题

[SnobbyVirus1973]

问题：
我的问题和讨论#6265一样，我也是希望在代码中手动创建一个Vue3组件，然后修改其props，但是我在使用上述讨论的评论中的方案后，发现并不好用，不知道是不是我的写法有问题，还是版本不一样导致的？

我按照上面讨论的方案修改后，是这个样子：

版本:
vite: ^5.2.10
vue: ^3.4.25

[liulinboyi]

原因

没有在子组件中defineExpose instance属性，所以你在父组件通过ref访问不到。

推荐用法

在线例子

父组件：

<script setup>
import {
  h,
  ref,
  createApp,
  onMounted,
  onBeforeUnmount
} from 'vue'
import Com from './Comp.vue'

const appRef = ref()

const handle = () => {
  // instance是我在子组件Comp.vue中expose出去的
  console.warn(appRef.value.instance)
}

onMounted(() => {
  const demo = document.querySelector('#demo')
  demo.addEventListener('click', handle)

  const app = createApp({
    render() {
      return h(Com, { ref: appRef })
    }
  })
  app.mount(demo)
})

onBeforeUnmount(() => {
  const demo = document.querySelector('#demo')
  demo.removeEventListener('click', handle)
})

</script>

<template>
  <button @click="appRef.add">Add</button>
  <div id="demo"></div>
</template>

<style scoped>
#demo {
  font-size: 100px;
  cursor: pointer;
}
</style>

子组件 Comp：

<script setup>
import { ref, getCurrentInstance } from 'vue'
const count = ref(10)

defineExpose({
  add() {
    count.value++
  },
  instance: getCurrentInstance()
})
</script>

<template>
  <div>
    {{ count }}
  </div>
</template>