The inheritAttrs Option in Vue – onlinecode

onlinecode

2 years ago

The inheritAttrs Option in Vue – onlinecode

In this post, we will give you information about The inheritAttrs Option in Vue – onlinecode. Here we will give you detail about The inheritAttrs Option in Vue – onlinecode And how to use it also give you a demo for it if it is necessary.

By default, attributes on the component “fall through” to the rendered element. In the following example, the top-level <div> in the MyComponent template will inherit the attribute(inheritAttrs Option in Vue).

// MyComponent.js
Vue.component('MyComponent', {
  template: '<div>Hello World</div>'
});

// index.js
<MyComponent class="style-div" />

In other words, the rendered element would look like the following.

<div class="style-div">Hello World</div>

`inheritAttrs`

Setting inheritAttrs to false prevents this fall through behavior. In the following example, the <div> in MyComponent will not inherit the class attribute, or any other attribute.

Vue.component('MyComponent', {
  inheritAttrs: false,
  template: '<div>Hello World</div>'
});

The rendered element would look like the following.

<div class="style-div">Hello World</div>

We find inheritAttrs is useful in cases where you want to define an internal event handler that fires the user-specified event handler.
For example, we use inheritAttrs for our async-button component, which executes an async function when the button is clicked and disables the button for the duration of the async function.
The async-button component needs to execute some logic to disable itself, in addition to executing the user-specified @click handler.

app.component('async-button', {
  data: () => ({
    status: 'init'
  }),
  inheritAttrs: false,
  methods: {
    // When the user clicks the button, we actually call
    // the 'handleClick()' method first...
    async handleClick(ev) {
      if (this.status === 'in_progress') {
        return;
      }
      this.status = 'in_progress';
      try {
        // and the 'handleClick()' method calls the user-specified
        // '@click' handler. 'this.$attrs' refers to the attributes
        // specified on '<async-button>' in HTML.
        await this.$attrs.onClick(ev);
      } catch (err) {
        this.status = 'error';
        throw err;
      }
      this.status = 'success';
    }
  },
  computed: {
    // Use "selective binding". Bind all attributes _except_
    // 'onClick' and 'disabled', because 'async-button' wraps
    // those attributes. Styles and class names still fall through.
    attrsToBind() {
      const attrs = { ...this.$attrs };
      delete attrs.onClick;
      delete attrs.disabled;
      return attrs;
    },
    isDisabled() {
      return this.status === 'in_progress' || this.$attrs.disabled;
    }
  },
  template: template
});

Below is the HTML for the async-button component. Note that v-bind binds any additional attributes, other than
disabled and onClick.

<button v-bind="attrsToBind" :disabled="isDisabled" @click="handleClick">
  <slot></slot>
</button>

Vue.js is a progressive JavaScript framework that makes building user interfaces simple and enjoyable. Vue is designed from the ground up to be incrementally adoptable, so you can use the features you need, and mix and match Vue with other libraries or frameworks.

Vue is a relatively new framework, but it has quickly become one of the most popular JavaScript frameworks in the world. It is used by large companies like Alibaba, Baidu, and Xiaomi, as well as by thousands of smaller businesses and startups.

Here are some of the features that make Vue.js so popular:

Declarative rendering: Vue uses a declarative rendering model, which means that you can describe the desired output of your application in terms of HTML, CSS, and JavaScript. This makes it easy to reason about your code and to make changes to your application.
Reactivity: Vue is a reactive framework, which means that it automatically updates the DOM whenever there is a change to the application’s state. This makes your application feel fast and responsive.
Composition: Vue is a component-based framework, which means that you can build your application out of reusable components. This makes your code more maintainable and easier to test.
Performance: Vue is a highly performant framework. It has been benchmarked against other popular JavaScript frameworks, and it has consistently outperformed them.