Vue components can communicate with each other using props and vuex, but vuex is too heavy, and props is too cumbersome to use in multilevel components. Vue version 2.4 provides an alternative, using v-bind=”$attrs”, Pass properties from the parent component that are not considered bound by the PROPS feature into the child component, usually in conjunction with the interitAttrs option.

For example, the following hierarchy

<top>
  <center>
    <bottom>
    </bottom>
  </center>
</parent>
Copy the code

Copying code If the top component wants to communicate with the bottom component, there are three ways to do so

1. Through the functions of props and $emit, top passes to center, and Center passes to bottom, or bottom passes to Center, and Center passes to Top

2. Use VUEX, but the state of the two components may not be global

3. Use the central event bus

While the first two approaches may not be ideal, here’s another approach

Take a look at the code snippet

The top component, which passes the name, age, gender, and SDF attributes to the child component Center, then receives two isClick() and ASD () methods

<template> <section> <centers name="name" age="18" gender="666" sdf="asd" @isClick="isClick" @asd="asd" ></centers> </section> </template> <script> import centers from '~/components/center'; export default { components: { centers }, methods: { asd() { console.log(999); }, isClick() { console.log(666); }}}; </script>Copy the code

The center component accepts only name and age attributes, but no other attributes. Use v-bind=” attrs” attributes, vm.attrs” attributes, vm.attrs” attributes, vm.attrs is an attribute, It contains feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. These unrecognized attributes can be passed to the internal component via V-bind =” attrs”. Unrecognized events can be passed to internal components via V − ON =”attrs”. Unrecognized events can be passed to internal components with V-on =”attrs”. Unrecognized events can be passed on via V −on=”listeners”.

<template>
  <section>
    <div class="mt-10">
      <bottom v-bind="$attrs" v-on="$listeners" />
    </div>
  </section>
</template>

<script>
  import bottom from '~/components/bottom';
  export default {
    components: {
      bottom
    },
    props: {
      name: {
        type: String,
        default: 'default'
      },
      age: {
        type: String,
        default: 'default'
      }
    }
  };
</script>
Copy the code

For the bottom component, we only receive the gender attribute, but this attribute is received from the top component by its parent, Center, using V-bind =”$attrs”. The Center component itself does not receive this attribute with props, but the bottom attribute is used

<template> <section> <div> {{$attrs['gender']}} In $attrs, there are only properties registered for props <br> {{gender}} </div> </section> </template> <script> export default { props: { gender: { type: String, default: '' } }, mounted() { console.log(this.$attrs); console.log(this.$listeners); this.$listeners.isClick(); this.$listeners.asd(); }}; </script>Copy the code

conclusion

V -bind=”$props”: you can send all of the parent component’s props to its children, which need to define the props to accept in its props:{}.

Vm.$props: The props object received by the current component. The Vue instance proxies access to properties of its props object.

2. V-bind =”$attrs”: passes down non-props features (except class and style) bound to the component tag when the component is called. You should add inheritAttrs: False to the child component (to prevent parent-scoped feature bindings that are not recognized as props from being applied to the root element of the child component).

Vm. attrs: Contains feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. When a component does not declare any prop, it contains all bindings in the parent scope (except class and style), and can contain feature bindings (except class and style) in the parent scope that are not recognized (and retrieved) as prop by v−bind=”attrs: “. When a component does not declare any prop, it contains all bindings in the parent scope (except class and style), and can contain feature bindings (except class and style) in the parent scope that are not recognized (and retrieved) as prop by v-bind=”attrs: “. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and internal components can be passed in via v−bind=”attrs” — useful when creating higher-level components.

3. V-on =” Pass down a custom event from the parent component’s tag to the child component directly via emit(eventName).

Listeners: Von event listeners in the parent scope (without. Native modifiers) Listeners can notice the process by means of V −on=” Listeners: V-ON event listeners in the parent scope (without the.native modifier). The listeners can be listeners of V-on events in the parent scope (native modifiers are not included) via V-on =”listeners: Internal components can be passed in via V − ON =” Listeners “– useful for creating higher-level components.

4. To illustrate:

In the example above, the top component can pass to center without receiving any values, and then pass to the bottom component directly using v-bind=”$attrs”. The bottom component can then use props to receive all attributes from Top

$attrs =”$attrs”; $attrs =”$attrs”

<template> <div> <el-button v-bind="$attrs"> </el-button> <div> </template> // parent component <my-button type='primary' size='mini'/>Copy the code

Attrs and vm. Attrs, vm. Attrs and vm

Original article: www.cnblogs.com/jin-zhe/p/1…