子コンポーネントを親コンポーネント内にてString化したい


#1

表題のとおりですが、子コンポーネントにて生成されるHTMLをまるっとStringとして変数に格納したいです。

ご存知の方がいましたら教えていただけますでしょうか?


#2

こんなかんじでどうでしょうか? https://jsfiddle.net/unnzLbom/

描画が確実に完了したタイミング(mountedフックの中で呼び出した $nextTick のコールバック内)で、ref 経由でコンポーネントの Vue インスタンスを取得して、$elouterHTML とプロパティを参照して生成された HTML を取得します。


#3

@kitak

回答ありがとうございます!

理想的には、HTML上にレンダリング済のコンポーネントをjs側で参照するのではなく、
js内でメモリ上にレンダリングしてString化(html上に反映させない)したいのですが、
可能でしょうか?

イメージ的にはこんな感じです。

// js
Vue.component('foo', {
  template: `<p>Hello Vue.js in component!</p>`
});
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
  },
  mounted() {
    html = Vue.rendering('<foo></foo>') // js内にてレンダリング
  }
});

#4

なるほど。
であれば、いったん対象のコンポーネントを登録する際のオプションオブジェクトを Vue.extend に渡して、サブコンストラクタを定義します。そのコンストラクタのインスタンス経由で取得できそうです。 https://jsfiddle.net/d884o44u/


#5

おー!なるほど!
これなら実現できそうです!

ありがとうございます!!!