Introduction:

vueThere are many ways for components to communicate with each other,props/emit , event bus, vuex, provide/injectEtc., there is another way to communicate$attrsand$listenersLet’s look at these two properties through a three-generation component relationship

$attrs

Contains property bindings that are not recognized as prop in the parent scope (except for class and style). If a prop is not declared, all bindings in the parent scope are passed into the internal component

Simply accept all bound properties (class, style excepting) except the props declaration

/ / 1 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- < div Class = "details" > < h1 > parent component - {{MSG}} < / h1 > < myComponent: name = "MSG" age = "12" gender = "man" > < / myComponent > < / div > / / 2 ------------------------------------------------------------------------------------------------------------ <-- <div : name = "MSG" age = "12" gender = "man" class = "child" > -- > < div class = "child" > < h2 > child components - {{$attrs. Name}} < / h2 > < Son v-bind="$attrs"/> </div> created () { window.console.log(this.$attrs); //{name: "props ", age: "12", gender: "man"}}, // $attrs contains attributes other than props {age: "12", gender: "man"}}, // If the component is displaying props, then $attrs contains attributes other than props {age: "12", gender: "man"} //props: ["name"], / / level 3 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- < div Class = "son" > < h3 > sun components - {{$attrs. Age}} < / h3 > < / div > created () {window. The console. The log (enclosing $attrs); //{name: "xiaobai ", age: "12", gender: "man"}},Copy the code

$listeners

The official website explains: Native modifiers can be passed to internal components via V-on =$listeners, useful for creating higher-level components. Events in the parent scope (other than.native) can be passed to internal components (level 1) , level 2,, level 2), which makes it easier to pass data from internal components to parent components

/ / 1 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- < div Class ="details"> <h1> Parent component --{{MSG}}</h1> <myComponent @name=" getName "@age="getage" @gender="getgender" ></myComponent> </div> methods: {getName (e){window.console.log("name",e) // name small}, getage(){window.console.log("age")}, Getgender (){window.console.log("gender")} // level 2 ------------------------------------------------------------------------------------------------------------ <div Class ="child"> <Son V -on="$listeners"/> </div> created () {window.console.log(this. ƒ, gender: ƒ}}, / / level 3 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- < div Class = "son" > < h3 v - on = "$listeners" > < / h3 > < button @ click = "toname" > click < / button > < / div > data () {return {name: "small"}; }, created() { window.console.log(this.$listeners); }, methods: { toname() { this.$listeners.name(this.name); }}Copy the code

case

The Element UI pager is packaged as a component, using $listeners and $listeners to make the attributes and events of a third-party component available on the component itself.

// component <Pagenation v-if="list && list. Length > 0" class=" Pagenation ":total="total" :page-size="pagesize" @current-change="onPageChange" :current-page.sync="currentPage" /> next" v-bind="$attrs" v-on="$listeners"> </el-pagination>Copy the code