第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别

 

 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     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11   </head>
12 
13   <body>
14       <div id="app">
15       <!-- 父组件,可以在引用组件的时候,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 -->
16       <com1 v-bind:parentmsg="msg"></com1>
17       </div>
18 
19       <script>
20           //创建 Vue 实例,得到 ViewModel
21           var vm =  new Vue({
22               el:'#app',
23         data:{
24           msg:'123 啊-父组件中数据'
25         },
26         methods:{},
27         components:{
28           //结论:经过演示,发现,子组件中,默认无法访问到 父组件中的data上的数据和methods 中的方法
29           com1:{
30             data(){//注意:子组件中的data数据,并不是通过父组件传递过来的,而是子组件自身私有的,比如:子组件通过Ajax,请求回来的数据,都可以放到data身上;
31               //data上的数据,都是可读可写的;
32               return{
33                   title:'123',
34                   content:'qqq'
35               }
36             },
37             template:'<h1 @click="change">这是子组件---{{parentmsg}}</h1>',
38             //注意:组建中的所有props中的数据,都是通过父组件传递给子组件的
39             //props 中的数,都是只读的,无法重新赋值
40             props:['parentmsg'],//把父组件传递过来的parentmsg 属性,先在props数组中,定义一下,这样,才能使用这个数据
41 
42             methods:{
43               change(){
44                 this.parentmsg='被修改了'
45               }
46             }
47           }
48         }
49           });
50       </script>
51   </body>
52 </html>

 

posted on 2019-06-11 10:12  songsong_p_blue  阅读(263)  评论(0编辑  收藏  举报