components组件传自定义参数
vue 2017-09-19 16:15:13

参考资料：

http://www.cnblogs.com/wisewrong/p/6266038.html

 

例：

参数名  pageTitle　页面标题

引用组件：

XML/HTML Code复制内容到剪贴板
  1. <template>    
  2.     <div class="main">    
  3.     
  4.         <app-header :pageTitle="pageTitle"></app-header>    
  5.         <h1>{{ msg }}</h1>    
  6.            
  7.     </div>    
  8. </template>    
  9.     
  10. <script>    
  11.     import AppHeader from './common/Header.vue'    
  12.     
  13.     export default {    
  14.         name: 'main',    
  15.         components: {    
  16.             AppHeader    
  17.         },    
  18.         data() {    
  19.             return {    
  20.                 msg: '主体部分',    
  21.                 pageTitle:"123456789"    
  22.             }    
  23.         }    
  24.     }    
  25. </script>    

说明：app-header使用公共的头部，绑定pageTitle参数，前面加 : 号绑定，在data里面，自定义一个参数，来给它赋值，可以使用同样的变量名

 

common/Header.vue：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div class="header">  
  3.         <mt-header :title="pageTitle">  
  4.             <a slot="left" v-if="returnBtn" @click="routerBack">  
  5.                 <mt-button icon="back" >返回</mt-button>  
  6.             </a>  
  7.             <mt-button icon="more" slot="right"></mt-button>  
  8.         </mt-header>  
  9.     </div>  
  10. </template>  
  11.   
  12. <script>  
  13.     export default {  
  14.         name: 'header',  
  15.         data() {  
  16.             return {  
  17.                 returnBtn: false, /* 返回按钮是否显示 */  
  18.             }  
  19.         },  
  20.         props: [  
  21.             'pageTitle'  
  22.         ],  
  23.         mounted () { // 这个是页面创建的时候，就执行相关的方法  
  24.             this.init()  
  25.   
  26.         },  
  27.         methods: { // 这里放方法，方法之间用逗号隔开  
  28.             init () {  
  29.                 this.pageTitle = this.pageTitle?this.pageTitle:"标题";  
  30.                 if(this.$route.path != '/'){  
  31.                     this.returnBtn = true;  
  32.                 }  
  33.             },  
  34.             routerBack(){  
  35.                 this.$router.go(-1);  
  36.             }  
  37.         }  
  38.     }  
  39. </script>  

说明：这里的title加冒号是因为这里原本的元素就是title所以在元素前面加冒号绑定pageTitle参数，同时，props接受传参，pageTitle在init方法中，作判断，如果没有传参给默认值 

 

 

本文来自于：http://www.cnblogs.com/pengchengzhong/p/6008198.html

上一篇 vue 使用mint-ui组件中的Tabbar监听点击事件
下一篇 vue 整合Mint UI组件
相关的文章
Powered by yoyo苏ICP备15045725号