标签：传参 function pageIndex false 跳转 组件 true newIndex NewPage

(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>

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。