Vue component render feature: print unlimited html object
How can I make Vue 2 render my component without leaving the HTML entity, and print it as plain text? If it was a tag, I would put another one in createElement
, but that's not the case.
Vue.component('my-component', {
render: function(createElement) {
return createElement('div', ' ')
}
})
new Vue({
el: '#app',
components: [
'my-component'
]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<div id="app">
<my-component />
</div>
+3
source to share
1 answer
You can define DOM properties and HTML attributes in the second argument of the function createElement
.
Docs: https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
Decision:
Vue.component('my-component', {
render: function(createElement) {
return createElement('div', {
domProps: {
innerHTML: ' '
}
})
}
})
new Vue({
el: '#app',
components: [
'my-component'
]
})
console.log(document.getElementById('app').firstChild.innerHTML)
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<my-component></my-component>
</div>
Update after comment:
you can fill your component with children like this:
Vue.component('my-component', {
render: function(createElement) {
return createElement('div',
[
createElement('p', 'top tag'),
createElement('div', {
domProps: {
innerHTML: 'A B'
}
}),
createElement('p', 'bottom tag'),
]
)
}
})
new Vue({
el: '#app',
components: [
'my-component'
]
})
console.log(document.getElementById('app').firstChild.innerHTML)
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<my-component></my-component>
</div>
+2
source to share