Vue系列之 => 父组件向子组件传值

 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>
 9     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13     
14 <body>
15     <div id="app">
16         <!-- 父组件可以在引用子组件的时候通过属性绑定(v-bind:)的形式把
17         需要传递给子组件的数据以属性绑定的形式传递到子组件内部给子组件使用 -->
18         <com1 v-bind:parentmsg="msg"></com1>
19     </div>
20 
21     <template id="mytem">
22             <div>
23                 工要要地地
24             </div>
25         </template>
26     <script>
27         
28         var vm = new Vue({
29             el: '#app',
30             data: {
31                 msg : '123啊- 父组件中的数据'
32             },
33             methods: {
34                 
35             },
36             components:{
37                 //经过演示，子组件中，默认无法访问到父组件中的data数据和methods方法
38                 com1 : {
39                     // 注意：子组件中的data数据并不是通过父组件传递过来的，而是子组件自身私有的
40                     // props 中的数据都是只读的，无法重新赋值
41                     //比如，子组件通过ajax请求回来的数据，都可以放到data身上
42                     data(){
43                         return {
44                             title : '123',
45                             content : 'qaq'
46                         }
47                     },
48 
49                     // template : '<h1>这是子组件 --- {{ msg }}</h1>' | msg => undefined
50                     template : '<h1>这是子组件 --- {{ parentmsg }}</h1>',
51                     // 注意：组件中所有的props中的数据，都是通过父组件传递给子组件的
52                     //把父组件传递过来的parentmsg属性，先在props数组中定义一下这样才能使用这个数据。
53                     props : ['parentmsg']
54 
55                 }
56             }
57             
58         })
59     </script>
60 </body>
61 
62 </html>
Vue系列之 => 父组件向子组件传值

猜你喜欢
