Vue 3如何从组件获得渲染html元素?

Question

这是我的组件名称LayerComponent (dummy)。

<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">You clicked me {{ count }} times.</button>
</template>

我需要渲染DOM元素在另一个组件的挂载钩子为第三方库。并且还需要访问商店

在Vue 2中，我用这种方式渲染dom。

import Vue from "vue";
import LayerComponentfrom "./LayerComponent";

...other code
........
mounted() {
const lsComponent = Vue.extend(LayerComponent)
const domElement= new lsComponent({
store: this.$store,
}).$mount();
let htmlElement = domElement.$el;
//Now I can use this element in vanilla JavaScript.
}

在Vue 2中工作得很好。

但是我如何在Vue 3中做同样的事情呢?

我已经试过了:

const lsApp = createApp(LayerComponent);
lsApp.use(this.$store);

但是商店不工作。

注意:我使用VueX 4.

提前感谢。

Answer 1

传递给app.use()的参数必须是Vue插件，所以我认为你应该导出存储实例export const store = createStore(options);在表达式lsApp.use(store);

中作为参数传递