コンポーネントの内部htmlを変数として取得する

Question

child-componentというvuejsコンポーネントがあります。これは、次のように親コンポーネントに追加されています。

<child-component> 
    <div>Hello</div> 
</child-component> 

N.B.これは子コンポーネントのテンプレートではありません。これは、子コンポーネントが親に追加される方法です。

チャイルドコンポーネント内のinnerHTML、つまり<div>Hello</div>を文字列として取得するにはどうすればよいですか？

Answer 1

child-componentの内部では、mountedライフサイクルハンドラでHTMLがthis.$el.innerHTMLとして利用可能になります。解析されたvnodeはthis.$slots.defaultから入手できます。あなたはVueの子コンポーネントの参考文献を使用して見て可能性があり

console.clear() 
 

 
Vue.component("child-component",{ 
 
    template: `<div><slot/></div>`, 
 
    mounted(){ 
 
    console.log("HTML", this.$el.innerHTML) 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: "#app" 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <child-component> 
 
    <div>Hello</div> 
 
    </child-component> 
 
</div>

Answer 2

。これにより、親コンポーネントから子コンポーネントのinnerHTMLにアクセスできます。

子コンポーネントにref属性を追加するだけです。 childElあなたが参照してきた全体の子コンポーネントを設定します

let childEl = this.$refs.mychildcomponent 

：その後、親のメソッドで、あなたのような何かを行うことができます

<child-component ref="mychildcomponent"> 
    <div>Hello</div> 
</child-component> 

：それはあなたが選ぶ何もすることができます。

let childEl = this.$refs.mychildcomponent.$el.innerHTML 

あなたの子コンポーネントのinnerHTMLプロパティの文字列を与える必要があります。innerHTMLのヤウドを取得するにはほんの少しさらに行くと、このような何かをしなければなりません。

これは役立つかもしれない：https://vuejs.org/v2/guide/components.html#Child-Component-Refs

を代わりにあなただけのメソッド内で以下の操作を行い、子コンポーネント自体からそれを取得したい場合：

let componentHTML = this.$el.innerHTML 

に役立ちます願っています。