如何访问 Vue 3 中的组件 $el.innerHTML？

Question

在 Vue 2 中，可以通过 someInstance.$el.innerHTML 访问 Vue 组件实例的 innerHTML。如何在 Vue 3 中实现相同的功能？

Answer 1

假设您要创建一个 Vue 组件并访问其 innerHTML。在 Vue 2 中，可以这样做：

const wrapper = document.createElement('div');
const someComponentInstance = new Vue({
    render: h => h(SomeComponent, {
        props: {
           someProp: 'prop-value-123'
        }
    })
});
someComponentInstance.$mount(wrapper);
console.log(someComponentInstance.$el.innerHTML);

要在 Vue 3 中实现相同的功能，我们必须像这样利用 createApp() 和 mount() 函数：

const wrapper = document.createElement('div');
const someComponentInstance = createApp(SomeComponent, {
    someProp: 'prop-value-123'
});
const mounted = someComponentInstance.mount(wrapper); // returns an instance containing `$el.innerHTML`
console.log(mounted.$el.innerHTML);

一句警告：如果你的 innerHTML 是用户生成的并且你想在你的应用程序中的某个地方重复使用它，请确保对其进行清理。

如何访问 Vue 3 中的组件 $el.innerHTML？

How to access a components $el.innerHTML in Vue 3?

innerhtml

vue.js

vuejs3