1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 1. Import packages Vue<! -9 -> 10 < Script the src = "https://cdn.jsdelivr.net/npm/vue" > </ Script > . 11 </ head > 12 is 13 is < body > 14 < div ID = "App" > 15 <! - parent component, can be cited when the assembly property is bound by the form (v-bind :) and the data to be passed to the sub-assembly in the form of binding properties, transmitted to the inner subassembly for subassembly use -> 16 < COM1 V the bind-: parentmsg = "MSG" > </ COM1 > . 17 </ div > 18 is . 19 < Script > 20 //Create Vue instance, to give the ViewModel 21 is var VM = new new Vue ({ 22 is EL: ' #app ' , 23 is Data: { 24 MSG: ' 123 ah - parent component data ' 25 }, 26 is Methods: {}, 27 Components: { 28 // Conclusion: after presentation, found subassembly, the default method of data and methods of a parent can not access the data in the assembly 29 COM1: { 30 data () { // NOTE: subassembly data data is not transferred through the assembly over the parent, but private sub-assembly itself, such as: sub-assembly by Ajax, requested data back, the body can be placed inside the data; 31 // data on the data, is read writable; 32 return { 33 is title: ' 123 ' , 34 is Content: ' QQQ ' 35 } 36 }, 37 [ Template: ' <h1 of the Click @ = "Change"> This is a subassembly --- {{parentmsg}} </ h1> ' , 38 // Note: the data thus set in the props, are transmitted to the parent sub-assembly by the assembly 39 // number of props, are read-only, can not be reassigned 40 props: [ ' parentmsg ' ], // the parent component is passed over parentmsg properties, props in the first array, the definition of what, so, can use this data 41 is 42 is Methods: { 43 is Change () { 44 is the this .parentmsg = ' has been modified ' 45 } 46 is } 47 } 48 } 49 }); 50 </ Script > 51 is </ body > 52 is </ HTML >