组件页面跳转及父子组件传参

(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

 

标签：传参,function,pageIndex,false,跳转,组件,true,newIndex,NewPage
来源： https://www.cnblogs.com/keai/p/11119052.html