web-dev-qa-db-ja.com

コンポーネントはどのようにしてVue 2.0で自分自身を削除できますか

タイトルとして、どうすればそれができますか

公式ドキュメントから、$ deleteは引数 'object'および 'key'を使用できることを教えてください

しかし、私はこのようにコンポーネントを単独で削除したい

this.$delete(this)
vue.jsvue-component
16
Ciao

いいえ、コンポーネントを直接削除することはできません。親コンポーネントは、v-ifを使用して、DOMから子コンポーネントを削除する必要があります。

参照： https://vuejs.org/v2/api/#v-if

ドキュメントから引用：

式の値の真実性に基づいて、条件付きで要素をレンダリングします。要素とそれに含まれるディレクティブ/コンポーネントは、トグル中に破棄および再構築されます。

子コンポーネントが親の一部のデータオブジェクトの一部として作成される場合、$emitを介して親にイベントを送信し、データを変更（または削除）する必要があります。子コンポーネントは自動的に消滅します。これに関して最近別の質問がありました： Delete a Vue子コンポーネント

24
Mani

Vueインスタンスを完全に削除する手順を見つけることができなかったので、ここにまとめました。

module.exports = {
  ...
  methods: {
    close () {
      // destroy the vue listeners, etc
      this.$destroy();

      // remove the element from the DOM
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};
11
bendytree

親からコンポーネントを削除する代わりに、v-if 初めて <div>タグ自体からのタグ。これにより、ページに空のコンポーネントが残り、ベストプラクティスではありませんが、親からのイベントの処理が回避される場合があります。

1
dnhyde

コンポーネントで beforeDestroy メソッドを使用し、DOMから自分自身を削除することができます。

beforeDestroy () {
  this.$root.$el.parentNode.removeChild(this.$root.$el)
},
0
Joe Hastings