Vue既に作成されマウントされているツールチップコンポーネントを#appに破棄する方法

Question

コンポーネントを作成し、アプリケーションのルート要素にレンダリング/マウントするカスタムVueツールチップ指示文を作成しようとしています。

現在のところコンポーネントはmouseenterに実装されていますが、mouseleaveには破壊されません。

後に、ディレクティブがバインドされている要素ClientRectを取得し、ツールチップを配置するスタイルを適用します。ここで

は私の指示コードは次のとおりです。

import Vue from 'Vue'; 
import tooltip from '../../views/components/tooltip/tooltip.vue'; 

export default { 
    bind() {}, 
    inserted(el) { 
     let component; 
     el.addEventListener('mouseenter',() => { 
      const Tooltip = Vue.extend(tooltip); 
      component = new Tooltip().$mount(); 
      document.getElementById('app').appendChild(component.$el); 
     }); 
     el.addEventListener('mouseleave',() => { 
      component.$destroy(); 
     }); 
    }, 
    update() {}, 
    componentUpdated() {}, 
    unbind() {}, 
}; 

どのように私はきちんとmouseleave上のコンポーネントを破壊することができますか？

Answer 1

insertedフック内でコンポーネントを作成するときにコンポーネントへの参照を保存し、コンポーネントを破棄する必要があるときに$destroyを呼び出します。あなたが手動で部品を実装しているので、手動で同様のHTML要素を削除する必要があります：

inserted(el) { 
    let component; 
    el.addEventListener('mouseenter',() => { 
    let Tooltip = Vue.extend(tooltip); 
    component = new ToolTip().$mount(); 
    document.getElementById('app').appendChild(component.$el); 
    }); 
    el.addEventListener('mouseleave',() => { 
    document.getElementById('app').removeChild(component.$el); 
    component.$destroy(); 
    }); 
}, 

Here's a working fiddle.