导航

vuejs2.0子组件改变父组件的数据实例

Posted on 2017-11-25 20:50  小飞博客  阅读(232)  评论(0)  编辑  收藏  举报

vue2.0后子组件不允许直接改变父组件里的数据，但是我们实际项目常常需要这样的应用，2.0后，可以这样做，巧妙的通过mounted这个方法进行了中转，实现了想要的效果，下面是实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script type="text/javascript" src="vue.js"></script>  
 7   <script type="text/javascript">
 8     window.onload = function(){
 9       var app = new Vue({
10       el:'#box',
11       data:{
12         myData:{
13           info:'父组件信息'
14         }
15       },
16       components:{
17         'v-com':{
18           props:['data'],
19           template:'#tpl',
20           methods:{
21             change(){
22               this.data.info = 'change info'
23             }
24           }
25         }
26       }
27     })
28     }
29   </script>
30 </head>
31 <body>
32   <!-- 子组件改变父组件的数据 -->
33   <div id="box">
34     <div>
35       <p>{{myData.info}}</p>
36       <v-com :data ="myData"></v-com>
37     </div>
38   </div>
39  
40   <!-- 模板 -->
41   <template id="tpl">
42     <div>
43       <button @click="change">change</button>
44       <p>{{data.info}}</p>
45     </div>
46   </template>
47  
48 </body>
49 </html>

 

这种是同步改变数据，就是说子组件的数据改变，父组件数据也跟着改变，下面展示非同步的情况

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <script type="text/javascript" src="vue.js"></script>  
 7   <script type="text/javascript">
 8     window.onload = function(){
 9       var app = new Vue({
10       el:'#box',
11       data:{
12         myData:'父组件信息'
13       },
14       components:{
15         'v-com':{
16           data() {
17             return {
18               childData:''
19             }
20           },
21           props:['data'],
22           // dom渲染完毕
23           mounted(){
24             this.childData = this.data
25           },
26           template:'#tpl',
27           methods:{
28             change(){
29               this.childData = 'change info'
30             }
31           }
32         }
33       }
34     })
35     }
36   </script>
37 </head>
38 <body>
39   <!-- 子组件改变父组件的数据,不同步 -->
40   <div id="box">
41     <div>
42       <p>{{myData}}</p>
43       <v-com :data ="myData"></v-com>
44     </div>
45   </div>
46  
47   <!-- 模板 -->
48   <template id="tpl">
49     <div>
50       <button @click="change">change</button>
51       <p>{{childData}}</p>
52     </div>
53   </template>
54  
55 </body>
56 </html>

以上就是全部内容，希望对大家有用！