Detailed explanation of how to use $props, $attrs and $listeners in Vue

background

Now let's discuss a situation, how do parent components communicate with grandchild components, how many solutions do we have?

• We use VueX for data management, but if there are fewer shared states among multiple components in the project, the project is small, and there are fewer global states, then using VueX to implement this function does not bring out the power of VueX .
• Use B as a transit station. When component A needs to pass information to component C, B receives the information from component A and then passes it to component C using properties. This is a solution, but if there are too many nested components, the code will be cumbersome and difficult to maintain. If the state change in C needs to be passed to A, use the event system to pass it up level by level.
• Customize a Vue central data bus. This is suitable for components that pass messages across levels. However, the disadvantage is that the code is less maintainable and less readable when multiple people collaborate.

1. Document Description

(1) $props : The props object received by the current component. A Vue instance proxies access to the properties of its props object.

(2) $attrs : Contains attribute bindings (except class and style) that are not recognized (and obtained) as props in the parent scope.

(3) $listeners : Contains the v-on event listeners in the parent scope (without the .native modifier). It can be passed into the internal component through v-on="listeners"

2. Specific Use

1. Parent component

 <template>
  <div>
    <div>Father component</div>
    <Child
      :foo="foo"
      :zoo="zoo"
      @handle="handleFun"
    >
    </Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      foo: 'foo',
      zoo: 'zoo'
    }
  },
  methods: {
    // Pass event handleFun(value) {
      this.zoo = value
      console.log('A click event occurred in the grandchild component, and I received it')
    }
  }
}
</script>

2. Child component (Child.vue)

The middle layer, as a transmission intermediary between the parent component and the grandchild component, adds v-bind="$attrs" to the grandchild component in the son component so that the grandchild component can receive the data.

$attrs is data passed from the parent component that the child component does not receive through props, such as zoo

 <template>
  <div class='child-view'>
    <p>Son component - {{$props.foo}} has the same content as {{foo}}</p>
    <GrandChild v-bind="$attrs" v-on="$listeners"></GrandChild>
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue'
export default {
  // Inherit all parent component contents inheritAttrs: true,
  components: { GrandChild },
  props: ['foo'],
  data() {
    return {
    }
  }
}
</script>

3. Grandchild component (GrandChild.vue)

In the grandchild component, you must use props to receive data passed from the parent component

 <template>
  <div class='grand-child-view'>
    <p>Grandchild component</p>
    <p>Data passed to grandchild component: {{zoo}}</p>
    <button @click="testFun">Click me to trigger the event</button>
  </div>
</template>

<script>
export default {
  // Do not want to inherit all parent component contents, and do not display attributes on the component root element DOM inheritAttrs: false,
  // In this component, you need to receive the data passed from the parent component. Note that the parameter name in props cannot be changed. It must be the same as the props passed by the parent component: ['zoo'],
  methods: {
    testFun() {
      this.$emit('handle', '123')
    }
  }
}
</script>

Conclusion

From the above code, we can see that using the attrs and inheritAttrs attributes can use concise code to pass the data of component A to component C. The scope of use of this scenario is quite wide.

Through listeners , we bind v-on="$listeners" on component b, and in component a, listen to the events triggered by component c. The data sent by component c can be passed to component a.

This is the end of this article about the detailed usage of $props, $attrs and $listeners in Vue. For more relevant Vue $props, $attrs and $listeners content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!