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

(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

 (2) 方法二

<template>
    <div>
        <ul>
            <li @click="query('A')" :class="{active:menuOne}">A</li>
            <li @click="query('B')" :class="{active:menuTwo}">B</li>
            <li @click="query('C')" :class="{active:menuThree}">C</li>
        </ul>
    </div>
    <div>
        <component :is="componentId"></component>
    </div>
</template>

<script>
    //引入需要的组件页面
    components:{},
    data(){
        return{
             menuOne:true,
             menuTwo:false,
             menuThree:false,
             componentId: 'A'
        }
    },
    methods:{
        query(name,menu){
            this.componentId = name
        }
    },
    watch:{//动态组件
          'componentId':function(newId,oldId){
            if(!newId) return false;
            this.menuTwo = false;
            this.menuOne = false;
            this.menuThree = false;
            if(newId === 'A') {
              this.menuOne = true
            } else if (newId === 'B') {
              this.menuTwo = true
            } else if (newId === 'C') {
              this.menuThree = true
            } else {
              //
            }
          }
        }
</script>
View Code

 

posted @ 2019-07-02 10:38  甜甜的小可爱ha  阅读(720)  评论(0)  编辑  收藏  举报