TA貢獻1824條經驗 獲得超6個贊
一種解決方案是創建一個僅包含目標組件$mountit 的新 Vue 實例，然后獲取outerHTML其$el（根元素）的：
視圖 2
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script>
Vue.component('blog-post', {
? props: ['title'],
? template: '<h3>{{ title }}</h3>'
})
const app = new Vue({
? template: `<blog-post title="Hello world" />`
}).$mount()
console.log(app.$el.outerHTML)
</script>
在 Vue 3 中，創建一個應用程序實例，并mount()在新創建的<div>.?的返回值mount()是根組件，其中包含$el：
<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
? template: `<blog-post title="Hello world" />`
})
app.component('blog-post', {
? props: ['title'],
? template: '<h3>{{ title }}</h3>'
})
const comp = app.mount(document.createElement('div'))
console.log(comp.$el.outerHTML)
</script>
TA貢獻1772條經驗 獲得超6個贊
如果要獲取組件的 HTML，則必須使用父元素的ref屬性。
嘗試這樣的事情：
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="UTF-8" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>Document</title>
? ? <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
? </head>
? <body>
? ? <div id="app">
? ? ? <div>
? ? ? ? <button @click="logComponentBlogPost">Log Component</button>
? ? ? </div>
? ? ? <div v-show="false" ref="BlogPost">
? ? ? ? <blog-post title="Hello Word"></blog-post>
? ? ? </div>
? ? </div>
? ? <script>
? ? ? let BlogPost = Vue.component('BlogPost', {
? ? ? ? props: ['title'],
? ? ? ? template: '<h3>{{ title }}</h3>',
? ? ? });
? ? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? components: { BlogPost },
? ? ? ? methods: {
? ? ? ? ? logComponentBlogPost() {
? ? ? ? ? ? console.log(this.$refs.BlogPost.innerHTML);
? ? ? ? ? },
? ? ? ? },
? ? ? });
? ? </script>
? </body>
</html>
舉報