Vue スロットの変更を監視するにはどうすればよいですか?この裏技を試してみてください！-Vue.js-php.cn

Vue スロットの変更を監視するにはどうすればよいですか?この裏技を試してみてください！

青灯夜游

リリース： 2022-09-28 19:53:15

転載

2766 人が閲覧しました

Vue のスロットの変更を監視するにはどうすればよいですか?以下の記事ではVueスロットの変化を監視する方法を紹介していますので、ご参考になれば幸いです。

Vue スロットの変更を監視するにはどうすればよいですか?この裏技を試してみてください！

最近、コンポーネントの内容 (スロット、サブコンポーネントなど) が変更されるたびにコンポーネントの状態を更新する必要があります。コンテキストとしては、入力の有効性ステータスを追跡するフォームコンポーネントです。

以下のコードスニペットは Options API 形式で書かれていますが、特に指定されている場合を除き、Vue2 と Vue2 の両方で使用できます。 [関連する推奨事項: vuejs ビデオチュートリアル ]

開始

フォームの状態を制御することから始め、状態に応じてクラスを変更し、次を使用します。 child content<slot/>Filling:

<template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
};
</script>

ログイン後にコピー

isInvalid プロパティを更新するには、トリガーされたイベントを追加する必要があります。# を使用できます。 ##sumit イベントですが、私は input イベントを使用することを好みます。

フォームイベントには、フォーカス、ぼかし、入力、選択、変更、リセット、送信などの 7 つがあります。詳細については、この記事をご覧ください:
https://blog.csdn。 net/qq_4379 ...

フォームは

input イベントをトリガーしませんが、"Event Delegate" を使用できます。リスナーを親要素 (

) にアタッチし、イベントがその子要素 (、

が DOM に追加されるとどうなりますか? たとえば、このフォームコンポーネントを

"MyForm"

と呼びます。アプリでは、コンテンツは次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">// App.vue <template> <MyForm> <input v-model="showInput" id="toggle-name" name="toggle-name" type="checkbox" /> <label for="toggle-name">显示其它 input</label> <template v-if="showInput"> <label for="name">Name:</label> <input id="name" name="name" required /> </template> <button type="submit">提交</button> </MyForm> </template> <script> import Form from "./components/form.vue"; export default { name: "App", components: { MyForm: Form, }, data: () => ({ showInput: false, }), }; </script></pre><div class="contentsignin">ログイン後にコピー</div></div>When

App.vue

条件によって特定の input を非表示にしたり表示したりすることをフォームが認識する必要があります。この場合、input イベントや mounted ライフサイクルフックだけでなく、フォームのコンテンツが変更されたときにその有効性を追跡することを考えます。そうしないと、誤った情報が表示される可能性があります。 Vue のライフサイクルフックに詳しい友人は、

update

を使用して変更を追跡することを考えるかもしれません。理論的には、これは素晴らしいことだと思います。実際には、無限ループが発生し、ブラウザがハングします。

解決策

調査とテストを行った結果、最良の解決策は

MutationObserver

API を使用することです。これは、DOM ツリーへの変更を監視する機能を提供するブラウザの組み込みメソッドです。この API は、ノードの追加または削除、属性の変更、またはテキストコンテンツの変更を通知できます。ネイティブメソッドなのでフレームワークに限定されません。

これを使用する場合は、まず

MutationObserver

コンストラクターを使用して新しいオブザーバーインスタンスを作成し、このインスタンスのコールバック関数を指定します。このコールバックは、DOM が変更されるたびに呼び出されます。コールバック関数は 2 つのパラメーターを受け入れます。1 つ目は変更配列、2 つ目はオブザーバーインスタンスです。form コンポーネントを次のように書き換えます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><template> <form :class="{ &#39;--invalid&#39;: isInvalid }" @input="validate"> <slot /> </form> </template> <script> export default { data: () => ({ isInvalid: false, }), mounted() { const observer = new MutationObserver(this.validate); observer.observe(this.$el, { childList: true, subtree: true, }); this.observer = observer; }, methods: { validate() { this.isInvalid = !this.$el.checkValidity(); }, }, beforeUnmount() { this.observer.disconnect(); }, }; </script> <style scoped> </style></pre><div class="contentsignin">ログイン後にコピー</div></div>ここでも # を使用する必要があります。 ##beforeUnmount

ライフサイクルイベントにより

observer が切断され、割り当てられたメモリがすべてクリアされます。 最後に、アクセスしたいコンテンツのプラグインスロットに isInvalid

ステータスを渡します。これはスコープのスロットとも呼ばれ、非常に便利です。

<template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }" @input="validate">
    <slot v-bind="{ isInvalid }" />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  mounted() {
    const observer = new MutationObserver(this.validate);
    observer.observe(this.$el, {
      childList: true,
      subtree: true,
    });
    this.observer = observer;
  },
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity();
    },
  },
  beforeUnmount() {
    this.observer.disconnect();
  },
};
</script>

ログイン後にコピー

このセットアップを使用すると、フォームコンポーネントに任意の数の input

を追加し、必要な条件付きレンダリングロジックを追加できます。

input が HTML 検証属性を使用している限り、フォームは有効な状態であるかどうかを追跡します。 さらに、スコープ付きスロットを使用しているため、フォームの状態を親に提供し、親が有効性の変更に反応できるようにします。

たとえば、

App.vue

で、フォームが無効な場合に送信ボタンを「無効」にしたい場合は、次のように記述できます。

<template>
  <MyForm>
    <template slot:default="form">
      <label for="name">Name:</label>
      <input id="name" name="name" required>

      <button
        type="submit"
        :class="{ disabled: form.isInvalid }"
      >
        Submit
      </button>
    </template>
  </MyForm>
</template>

ログイン後にコピー

nice~。 この記事があなたの将来の開発に役立つことを願っています。

(学習ビデオ共有: Web フロントエンド開発、基本プログラミングビデオ)

以上がVue スロットの変更を監視するにはどうすればよいですか?この裏技を試してみてください！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。