1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <!-- 父组件可以在引用子组件的时候，通过属性绑定（v-bind）的形式把需要传递给子组件的数据 11 以属性绑定的形式，传递给子组件的内部，供子组件使用 --> 12 <com1 v-bind:parentmsg="msg"></com1> 13 </div> 14 <script> 15 const vm = new Vue({ 16 el:'#app', 17 data:{ 18 msg:'父组件中的数据' 19 }, 20 methods:{}, 21 22 components:{ 23 //子组件中，默认无法访问到父组件中的data 数据和methods 中的方法 24 com1:{ 25 /** 26 * 注意：子组件中的所有 data 中的数据，并不是是通过父组件传递给子组件的， 27 * 而是子组件自身私有的； 28 * data上的数据是可读可写的 29 * 30 */ 31 data(){ 32 return { 33 title:'123' 34 } 35 }, 36 template:'<h1>这是子组件 - - -{{ parentmsg }}</h1>', 37 /** 38 * 注意：组件中的所有 porps 中的数据，都是通过 父组件传递给子组件的； 39 * props 中的数据只是可读的 40 */ 41 // 把父组件传递过来的 parentmsg 属性，先在 props 数组中定义一下，这样才能使用这个数据 42 props:['parentmsg'] 43 } 44 } 45 }) 46 </script> 47 </body> 48 </html>