父组件与子组件之间的传值(props)

###父组件与子组件之间的传值

 

在实际项目中,我们会遇到很多导航栏.若将这么多的tab栏写在一个页面,会很麻烦,也会很复杂.

那么,我们怎样做呢?

1.在主页面中可以用switchTab去定义好li标签

 

<ul class="nav nav-tabs nav-tabs-main">
     <li :class="{'active': tabName=='Taxpass'}">
     <a href="javascript:;" @click="switchTab('Taxpass')">税务账号密码授权</a>
     </li>
     <li :class="{'active': tabName=='Taxfile'}">
     <a href="javascript:;" @click="switchTab('Taxfile')" v-show="module!=':nonactivated'">税务附件上传</a>
     </li>
</ul>

 

2.在data中定义tabName

可以为空值,也可以初始化一个值

tabName: ' ',//最好有一个默认的值,可以默认打开改页面标签

 

3.在JS中书写switch函数

switchTab (tabName) {

sessionStorage.tabName = this.tabName = tabName
},

 

4.定义组件化

准备完毕,就可以定义组件化,

  <component :is="'View'+tabName" :order-id="orderId" :detail-info="detailInfo" :module="module"></component>

is="'View'+tabName"   //是要定义子组件的命名名称    

:order-id="orderId" :detail-info="detailInfo" :module="module"  //传给子组件的数据

 

5.在JS中调用子组件

components: {
ViewTaxpass: require('./ViewTaxpass.vue'),
ViewTaxfile: require('./ViewTaxfile.vue')
}

 

6.子组件用父组件的数据

 props: ['info', 'detailInfo'],  //需要用到的数据 通过props去传值

即可使用从父组件传来的数据