$listeners, $attrs, $Listeners

preface

Today, during the development, I found that my colleagues used $attrs and $Listeners, because I used few of them before, so I studied them. In general, these two apis are used for communication between components, but they are not as cumbersome as the communication between props and $emit to send value T. The disadvantage is that they are not easy to maintain. The readability is low, so we use it less in projects, and Vuex is also used if we need to communicate across multiple components

The main content

1. First to see$attrsand$listenersIs defined in the Vue document:
   • vm.$attrsContains the parent scopeNot identified (and retrieved) as a propAttribute bindings (except class and style). When a component does not declare any prop, all parent scope bindings (except class and style) are included, and internal components can be passed in via v-bind=”$attrs” — useful when creating high-level components.
   • $listenersContains theV-on event listener in parent scope (without.native modifier). It can pass in internal components via V-ON =”$Listeners “– useful when creating higher-level components.
2. Let’s do another Demo
   • App.vue

   <template>
     <div id="app">
       <Child1 :words1="text1" :words2="text2" :words3="text3" v-on:event1="goEvent1" v-on:event2="goEvent2"></Child1>
     </div>
   </template>
   
   <script>
   import Child1 from "./components/Child1"
   export default {
     name: "App".data() {
       return {
         text1: 1.text2: 2.text3: 3}},methods: {
       goEvent1() {
         console.log("Child submitted successfully")},goEvent2(value) {
         console.log(value)
       }
     },
     components: {
       Child1,
     }
   }
   </script>
   
   <style>
   html.body {
     height: 100%;
   }
   #app {
     height: 100%;
   }
   </style>
   Copy the code

   • Child1.vue

   <template>
     <div class="mainWrapper">
       <p>props: {{words1}}</p>
       <p>$attrs: {{$attrs}}</p>
       <button @click="submit()">submit</button>
       <hr>
       <child2 v-bind="$attrs" v-on="$listeners"></child2>
       <! Child2 can retrieve the events in the app by passing the v-on event listeners into the parent scope -->
     </div>
   </template>
   
   <script>
   import Child2 from "./Child2"
   export default {
     name: "Child1".props: ["words1"].data() {
       return{}},inheritAttrs: true.components: { Child2 },
     methods: {
       submit() {
         this.$emit("event1"."Child1 submits event")}}}</script>
   
   <style scoped>
   .mainWrapper {
     height: 100px;
   }
   </style>
   Copy the code

   • Child2.vue

   <template>
     <div>
       <div class="child-2">
         <p>props: {{words2}}</p>
         <p>$attrs: {{$attrs}}</p>
         <input v-model="inputValue" name="" id="" @input="goInput">
       </div>
     </div>
   </template>
   <script>
   export default {
     name: 'Child2'.props: ['words2'].data() {
       return {
         inputValue: ' '
       };
     },
     inheritAttrs: false.mounted(){},methods: {
       goInput () {
         this.$emit('event2'.this.inputValue); }}}</script>
   Copy the code

3. The effect
   • Can see the parent component App. Vue through the v – bind in passed three values to Child1, in child components are not Props receive values are$attrs, which can also be passed to Child2, the internal component of Child1, via v-bind, and can also be used$listenersPass the v-ON event listener from the parent scope to child2
4. InheritAttrs attributes and their effects
   • When a component sets inheritAttrs: false (the default is true), the component’s non-props properties (that is, properties that are not received by props) do not generate HTML properties on the component root that are considered comparison graphs

inheritAttrs:false

inheritAttrs:true       
Copy the code