如何在不渲染的情况下获取 vue 组件的 DOM？
假设我有一个像这样的简单 Vue 组件：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
我不想渲染组件。我只想title以某种方式将其传递到blog-post我的脚本代码中的组件中，并相应地获取 DOM。例如，如果我传递标题值Hello，那么我希望完整的 DOM 为<h3>Hello</h3>. 我会将 DOM 分配给一个变量以备后用。
largeQ浏览 129回答 1
1回答
-
慕妹3242003
一种解决方案是创建一个仅包含目标组件$mountit 的新 Vue 实例，然后获取outerHTML其$el（根元素）的：视图 2<script src="https://unpkg.com/vue@2.6.12/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>视图 3在 Vue 3 中，创建一个应用程序实例，并mount()在新创建的<div>. 的返回值mount()是根组件，其中包含$el：<script src="https://unpkg.com/vue@3.2.39/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> -
梦里花落0921
如果要获取组件的 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>
随时随地看视频慕课网APP
相关分类
JavaScript