父组件向子组件传值(子组件是私有化组件)

 // 子组件相当于是私有化组件
 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>

 

posted @ 2019-09-12 10:46  normalboy(NB)  阅读(141)  评论(0)    收藏  举报