Passing Html Into Vue Component
At the moment I pass some parameters into a vue component
Solution 1:
Don't pass HTML using attributes but using Slots:
Suppose we have a component called my-component with the following template:
<div><h2>I'm the child title</h2><slot> This will only be displayed if there is no content to be distributed. </slot></div>And a parent that uses the component:
<div><h1>I'm the parent title</h1><my-component><p>This is some original content</p><p>This is some more original content</p></my-component></div>The rendered result will be:
<div><h1>I'm the parent title</h1><div><h2>I'm the child title</h2><p>This is some original content</p><p>This is some more original content</p></div></div>
You can also use Named Slots if you want to pass more than one field containing HTML.
Solution 2:
You can inject raw html into Vue components with the v-html directive.
Solution 3:
I had similar problem in a project some months ago. I fixed it passing the HTML code in base64 format.
my parent component :
<wysywyg id="ssaasa":bal="to64('<strong>Me</strong>')"></wysywyg>my method:
methods: {
to64(html) {
return btoa(html)
}
}
my component:
<template><divclass="RenderHTMLEditor mx-3"><labelclass="subtitle-1 pb-3">{{label}}</label><textareahtml="true"v-model="to64"width="100%":style="'height:'+height+'px;'"wysywyg="true":name="id":id="id"class="tinywy"></textarea></div></template><script>exportdefault {
props: ['label', 'id', 'height', 'bal'],
data: function() {
return {
}
},
computed: {
to64: function() {
returnatob(this.bal)
}
},
mounted: function() {
window.initWy(this.id)
}
}
</script><stylescoped>.RenderHTMLEditor {
width: 100%;
}
</style>
Post a Comment for "Passing Html Into Vue Component"