1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="./public/lib/vue/dist/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <com1 v-bind:parentmsg="msg"></com1>
11 </div>
12 <script>
13 new Vue({
14 el:'#app',
15 data:{
16 msg: '父组件的值'
17 },
18 methods:{
19 },
20 components:{
21 com1:{
22 data: function(){
23 return {
24 title: '123',
25 content : 'chp'
26 }
27 },
28 template:'<h1>children {{parentmsg}} {{title}}</h1>',
29 props:['parentmsg']
30 // 把父属性传递过来的parentmsg属性,先在props数组中定义一下,
31 // 这样才能使用这个数据
32 }
33
34 }
35 })
36 </script>
37 </body>
38 </html>