How to monitor Vue slot changes? Try this trick!

How to monitor the slot changes of Vue? The following article will introduce you to the method of monitoring Vue slot changes. I hope it will be helpful to you!

Lately, I need to update the state of a component whenever its content (slots, subcomponents, etc.) changes. For context, it's a form component that keeps track of the validity status of its inputs.

The code snippet below is written in Options API format, but can be used in both Vue2 and Vue2 except where specified. [Related recommendations: vuejs video tutorial]

Start

Start by controlling the form state, modify a class according to the state, and use child content<slot/>Filling:

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

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

In order to update the isInvalid property, we need to add a triggered event, you can use the sumit event, But I prefer to use the input event.

There are 7 form events: focus, blur, input, select, change, reset, submit, etc. For details, please read this article: https://blog.csdn.net/qq_4379 ...

The form will not trigger the input event, but we can use "Event Delegate". We attach the listener to the parent element (<form>) and when the event occurs on its child elements (<input>, <select>, <textarea>, etc.) will be triggered.

Anytime an input event is triggered in this component's <slot>, the form will capture the event.

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

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  methods: {
    validate() {
      // 验证逻辑
    }
  }
};
</script>

Validation logic can be simple or complex. For demonstration purposes, this article uses a simple method to use form.checkValidity() API to check whether the form is valid based on HTML validation attributes.

In order to access the <form> element. You can use refs or $el attributes. For simplicity, this article uses $el.

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

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity()
    }
  }
};
</script>

Question

There is a little problem here. What happens if the content of the form changes? What happens if an <input> is added to the DOM when the form loads?

For example, we call this form component "MyForm". In App, the content is as follows:

// 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>

WhenApp.vueHide and display certain input through conditions, our form needs to know. In this case, we would think of tracking the validity of the form content when it changes, not just on the input event or the mounted lifecycle hook. Otherwise, incorrect information may be displayed.

Friends who are familiar with Vue’s life cycle hooks may think of using update to track changes. In theory, this sounds great. In practice, it creates an infinite loop and the browser hangs.

Solution

After some research and testing, the best solution is to use the MutationObserver API. It is a built-in method of the browser that provides the ability to monitor changes to the DOM tree. This API can be notified if nodes are added or removed, attributes change, or text content changes.

It is a native method, so it is not limited to the framework.

When using it, first use the MutationObserver constructor to create a new observer instance and specify the callback function of this instance. Called after every DOM change, this callback is called. The callback function accepts two parameters, the first is the change array, and the second is the observer instance. Rewrite our form component as follows:

<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>

You also need to use # here. ##beforeUnmount life cycle event to disconnect observer, which will clear any memory allocated by it.

Finally, we pass the

isInvalid status to the plugin slot of the content we want to access. This is also called the scope's slot and is very useful.

<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>

With this setup, we can add any number of

input to our form component and add any conditional rendering logic it needs. As long as input uses the HTML validation attribute, the form will keep track of whether it is in a valid state.

Additionally, because we are using scoped slots, we provide the form's state to the parent, so the parent can react to changes in validity.

For example, in

App.vue, we want to "disable" the submit button when the form is invalid, we can write like this

<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~.

Hope this article can be helpful to your future development.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of How to monitor Vue slot changes? Try this trick!. For more information, please follow other related articles on the PHP Chinese website!