vue.js - 在插槽內轉義html
[英]vue.js - escape html inside slot
問題描述
我目前正在開發一個如下所示的組件：
<pre v-highlightjs>
<code>
<slot></slot>
</code>
</pre>
所以我遇到的問題是當我在插槽中編寫html時，這個html會被渲染，而不是在我的情況下顯示為字符串或代碼示例。 我用轉義<和>測試了它並且它有效。 如何訪問插槽內的html並自動轉義？
謝謝
編輯：
我對該組件使用highlight.js來突出顯示組件內的代碼。 highlight.js可以突出顯示html。 我放的時候
<html><head></head><body></body></html>
在我的插槽中，顯示了該框，但輸入呈現為html。 所以我想逃避html-Tags（和其他代碼片段），以便顯示和突出顯示。 希望能更多地說明我的問題。
1 個解決方案
解決方案1
2 已采納 2018-01-14 17:44:09
需要注意的一個重要限制是HTML不是HTML，而是輸入到Vue的模板引擎，因此組件在插槽中看到的內容可能與HTML文件中的不完全相同。
編寫指令以獲取HTML內容並將其替換為該內容的文本版本非常簡單。 將它放在組件中也非常簡單。 您可以在下面的代碼段中看到這些內容。
什么你也將看到的是，Vue的模板引擎剔除標簽不應該是內部body ：在html ， head和body標簽不使它的組成部分。 如果有的話，他們的內容仍然存在。
如果能夠使用這些標簽（或者，就此而言，可能是無效的HTML）很重要，那么您將無法在插槽中執行此操作。 您需要將HTML作為數據字符串，您可以使用普通的curlies輕松插入。
new Vue({ el: '#app', data: { headContent: 'Something in the head' }, components: { htmlEscaper: { template: '#html-escaper', directives: { escapeContent: { bind(el) { const html = el.innerHTML; el.textContent = html; } } } } } });
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <html-escaper> <html> <head> {{ headContent }} </head> <some-junk> Custom tags are ok </some-junk> <body> <div>This part is legit</div> </body> </html> </html-escaper> </div> <template id="html-escaper"> <code v-escape-content> <slot> </slot> </code> </template>
Vue.js 從插槽內的孫子傳遞事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.