v-html
親のコンポーネントから文字列をタグつきで受け取って表示する際
<div v-html="content"></div>
こんな感じで指定しておくと、親で content="<a href='#'>link</a>" と指定された文字列がタグとして反映されて出力されます。ただ、 scoped されたこの中身にスタイルをあてようとすると、ひとクセ必要です。
<style scoped>
.a >>> .b {
/* Styles */
}
</style>
上記のように >>> コンビネータを使用することで、適用することができます。
ただ、 <style lang="scss" scoped> した時にうまくあたらなかったのでメモ。
そんな時は /deep/ コンビネータを使う
SASS のようなプリプロセッサは >>> をうまく解析できないため、エイリアスになっている /deep/ を代わりに使います。
<style lang="scss" scoped>
.a {
/deep/ .b {
/* Styles */
}
}
</style>
としたらうまくあたりました。
<template>
<div>
<dl>
<dt>{{ dt }}</dt>
<dd class="a" v-html="dd"></dd>
</dl>
</div>
</template>
<script>
export default {
props: ['dt', 'dd']
}
</script>
<style lang="scss" scoped>
.a {
/deep/ .b {
/* Styles */
}
}
</style>
ちなみに受け渡す元の要素には <a class="b" href="#">link</a> のようにクラスをつけておいた方がいいらしいです。