假设我有一个简单的Vue组件,如下所示:
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
我不想渲染组件。我只想以某种方式将title
传递到脚本代码内的blog-post
组件中,并相应地获取DOM。例如,如果我传递标题值Hello
,则我希望完整的DOM为<h3>Hello</h3>
。我将DOM分配给变量以供以后使用。
答案 0 :(得分:1)
一种解决方案是仅使用目标组件$mount
创建一个新的Vue实例,然后获取其outerHTML
的$el
(root element):
<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>
答案 1 :(得分:0)
如果要获取组件的HTML,则必须使用父元素的ref属性。
尝试类似的事情:
<!DOCTYPE html>
<html lang="en">
<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>