First, father to son, son Chuan Sun
1. props
1> from the tag data attributes defined by the sub-assembly to pass within parent components.
2> data used in the subassembly desired statement by props
1 <body> 2 <div id="app"> 3 <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father> 4 </div> 5 <script src="./node_modules/vue/dist/vue.js"></script> 6 <script> 7 let vm = new Vue({ 8 el:"#app", 9 data:{ 10 msg:"hello yilia" 11 }, 12 methods:{ 13 fn(){ 14 console.log("father"); 15 } 16 }, 17 components:{ 18 "my-father":{ 19 props:['msg1'], 20 template:`<div><h1>{{msg1}}</h1><my-son :msg2="msg1"></my-son></div>`, 21 data(){ 22 return { 23 } 24 }, 25 components:{ 26 "my-son":{ 27 props:['msg2'], 28 Template: `<P> Msg2 {{}} </ P>`, 29 inheritAttrs: to true , // is false when no data is used will not appear on the structure dom 30 Data () { 31 is return { 32 } 33 is } 34 is } 35 } 36 } 37 [ } 38 is }); 39 40 </ Script> 41 is 42 is </ body>
1.1 It should be noted that such an approach props addition to the above, it can also be written in the form of objects, to verify the data
. 1 The props: { 2 A: { . 3 type: Number The, . 4 default : 10 . 5 }, . 6 B: { . 7 type: String, . 8 Validator (Val) { . 9 return Val> 0; // "2"> 0 10 } . 11 }, 12 is ARR: { 13 is type: the array, 14 // if the property is an array of objects or default values required by the function returns 15 default : () => ([. 1 ]) 16 } . 17 },
2. Sometimes my-father less than this data, but the data needs to pass grandfather grandson, you can use $ attrs, in my-son v-bind = " $ attrs"
this. $ attrs the attributes are not used remain in this. $ attrs (that is, no props stated properties)
1 <body> 2 <div id="app"> 3 <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father> 4 </div> 5 <script src="./node_modules/vue/dist/vue.js"></script> 6 <script> 7 let vm = new Vue({ 8 el:"#app", 9 data:{ 10 msg:"hello Yilia" 11 }, 12 methods:{ 13 fn(){ 14 console.log("father"); 15 } 16 }, 17 components:{ 18 "my-father":{ 19 // props:['msg1'], 20 template:`<div><h1></h1><my-son v-bind="$attrs"></my-son></div>`, 21 data(){ 22 return { 23 } 24 }, 25 components:{ 26 "my-son":{ 27 props:['msg1'], 28 Template: `<P> MSG1 {{}} </ P>`, 29 inheritAttrs: to true , // is false when no data is used will not appear on the structure dom 30 Data () { 31 is return { 32 } 33 is } 34 is } 35 } 36 } 37 [ } 38 is }); 39 </ Script> 40 </ body>
Second, click on the sub-assemblies, call the parent element method (want to bind events to the native components in the parent assembly)
1. The need to add modifier native, adding it was not treated as a property
1 <body> 2 <div the above mentioned id = "App"> 3 <-! Want to bind to native events within parent components without the need to add .native was viewed as a property -> 4 <My-the Button click.native = @ "Fn"> </ Button My-> . 5 </ div> . 6 <Script the src = "./ the node_modules / VUE / dist / vue.js"> </ Script> . 7 <Script> . 8 the let VM = new new Vue ({ . 9 EL: "#app" , 10 Methods: { . 11 Fn () { 12 is the console.log ( "Fn () Called IS" ); 13 } 14 }, 15 components: { 16 "MyButton": { 17 template: ` 18 <div> 19 点我 20 </div>` 21 } 22 } 23 }); 24 </script> 25 </body>
Click on "my point" when the parent component fn function is called.
2. $ listeners bind all the way to directly call the parent component method
1 <body> 2 <div the above mentioned id = "App"> 3 <-! Want to bind to native events within parent components without the need to add .native was viewed as a property -> 4 <My-the Button the Click = @ "Fn"> </ Button My-> . 5 </ div> . 6 <Script the src = "./ the node_modules / VUE / dist / vue.js"> </ Script> . 7 <Script> . 8 the let VM = new new VUE ({ . 9 EL: "#app" , 10 Methods: { . 11 Fn () { 12 is the console.log ( "Fn () Called IS" ); 13 } 14 }, 15 components: { 16 "MyButton": { 17 mounted(){ 18 console.log(this.$listeners); 19 //{click: ƒ} 20 }, 21 template: `<div @click="$listeners.click()">点我</div>` 22 } 23 } 24 }); 25 </script> 26 </body>
3. subassembly want to call the parent component approach $ emit
1> $ emit call in the sub-assembly () method publish an event
2> provide a release event handler inside the sub-components in the parent assembly
3> released within the parent component sub-assemblies subscription events
1 <body> 2 <div the above mentioned id = "App"> 3 <-! Want to bind to native events within parent components without the need to add .native was viewed as a property -> 4 <! - <My-Button @ click.native = "Fn"> </ Button My-> -> . 5 <My-Button the Click @ = "Fn" @ mouseUp = "Fn"> </ Button My-> . 6 </ div > . 7 <Script the src = "../ VUE-01-Basic / code / the node_modules / VUE / dist / vue.js"> </ Script> . 8 <Script> 9 // components communicate attrs $ $ $ emit props in the Listeners 10 / * 11 child how to pass the Father 12 1 Call $ emit in a subassembly () method issues an event 13 2 provides a sub-event release the internal components in the parent assembly handler 14 3 in the inside release event subscription parent component subassembly 15 * / 16 the let VM = new new Vue ({ . 17 EL: "#app" , 18 is Data: { . 19 Content: "point I" 20 is }, 21 is Methods: { 22 is Fn (NUM) { 23 is the console.log (NUM, "Fn () Called IS" ); 24 } 25 }, 26 is Components: { 27 "the MyButton" : { 28 Mounted () { 29 console.log(this.$listeners);// 绑定所有的方法 30 }, 31 template: ` 32 <div> 33 <button @click="$listeners.click(123);">点我</button> 34 <button @click="$emit('click2',23)">点我</button> 35 <button @click="$listeners.click(123);" @mouseup="$listeners.mouseup(123);">点我</button> 36 <button v-on="$listeners" >点我</button> 37 </div> 38 ` 39 } 40 } 41 }); 42 </script> 43 </body>