页面跳转及父子组件传参

Posted 2022-03-08 keai

(1) 方法一

 1 <template>
 2     <div>
 3         <ul>
 4             <li @click="showPage1" :class="active:isShow1">11</li>
 5             <li @click="showPage2" :class="active:isShow2">22</li>
 6             <li @click="showPage3" :class="active:isShow3">33</li>
 7             <li @click="showPage4" :class="active:isShow4">44</li>
 8         </ul>
 9     </div>
10     <div>
11         <NewPage :pageIndex="pageIndex"></NewPage>
12     </div>
13 </template>
14 
15 <script>
16     //引入NewPage组件
17     import NewPage from ‘NewPage页面所在位置‘
18     export default
19         components:NewPage,
20         data()
21             return
22                 pageIndex:1,
23                 isShow1:true,
24                 isShow2:false,
25                 isShow3:false,
26                 isShow4:false
27             
28         ,
29         create()
30             this.pageIndex = 1
31         ,
32         methods : 
33             showPage1 : function()
34                 this.pageIndex = 1;
35             ,
36             showPage2 : function()
37                 this.pageIndex = 2;
38             ,
39             showPage3 : function()
40                 this.pageIndex = 3;
41             ,
42             showPage4 : function()
43                 this.pageIndex = 4;
44             
45         ,
46         watch:
47             ‘pageIndex‘ : function(newIndex,oldIndex)
48                 this.isShow1 = false;
49                 this.isShow2 = false;
50                 this.isShow3 = false;
51                 this.isShow4 = false;
52                 if (!newIndex) return false;
53                 this.pageIndex = newIndex;
54                 if (newIndex === 1) 
55                     this.isShow1 = true
56                 else if (newIndex === 2) 
57                     this.isShow2 = true
58                 else if (newIndex === 3) 
59                     this.isShow3 = true
60                 else if (newIndex === 4) 
61                     this.isShow4 = true
62                 else 
63                     //
64                 
65             
66         
67     
68 </script>

 1 <div></div>
 2 
 3 <script>
 4     export default 
 5     name: "NewPage",
 6     data() 
 7       return 
 8     ,
 9     props:[
10         ‘pageIndex‘
11     ],
12     methods: 
13      getInfo()
14         let pageIndex = this.pageIndex || this.$props.pageIndex
15         info(pageIndex).then(res => 
16           this.kssData = res.data;
17         ).catch(err => )
18       ,
19   ,
20   mounted()
21      this.getInfo();
22     ,
23     watch:
24       ‘pageIndex‘:function(newIndex,oldIndex)
25         console.log(‘newIndex‘,newIndex)
26         if(!newIndex) return false
27         this.getInfo()
28       
29 
30 </script>

View Code