假设我有一个像这样的简单 Vue 组件：Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>'})我不想渲染组件。我只想title以某种方式将其传递到blog-post我的脚本代码中的组件中，并相应地获取 DOM。例如，如果我传递标题值Hello，那么我希望完整的 DOM 为<h3>Hello</h3>. 我会将 DOM 分配给一个变量以备后用。
1 回答
慕妹3242003
TA贡献1824条经验 获得超6个赞
一种解决方案是创建一个仅包含目标组件$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
TA贡献1772条经验 获得超5个赞
如果要获取组件的 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>
添加回答
举报
0/150
提交
取消