vue2.0 组件之间传参通信

Question

我这里有两个vue页面
order是订单，notpay是未支付的详情，
页面长这样，我可以点击，可以跳到未支付酒店详情，需要带一个订单编号这个参数过去
在

这是跳转代码
然后
用props接收
为什么就是不行

<template>
<div>

<mt-navbar v-model="selected">
  <mt-tab-item v-for="(item,index) in sortselect" :id="index" @click.native="select(item.type)">{{ item.name }}</mt-tab-item>
</mt-navbar>

<!-- tab-container -->
<mt-tab-container v-model="selected" >

<!--全部-->

<mt-tab-container-item :id="0">

  <div v-for="item in tent">
    <navbar class="order-part" >
      <div class="order-list" >
            <ul class="order-list-ul">
                <li class="order-item">
                        <div class="item-part item-name">{{item.hotel.name}}</div>
                        <div class="item-part item-info">
                            {{item.startDate}}至{{item.endDate}} （{{Period}}晚）<br>
                            {{item.roomNum}}间 总价{{item.totalPrice}}
                        </div>
                        <div class="item-part item-bottom" v-if="status === 'waitForCheckIn'">
                            <a  class="delete" @click=changes() >改签</a>
                            <a class="more" style="float:right;" @click="refund(item.outTradeNo)"> 退款</a>
                        </div>
                        <div class="item-part item-bottom" v-if="status === 'waitForPay'">
                            <a  class="delete" @click="pay(item.outTradeNo)">支付</a>
                            <a class="more" style="float:right;" @click="delit(item.outTradeNo)">删除订单</a>
                        </div>
                        <div class="item-part item-bottom" v-if="status === 'checkIn'" >
                            <a  class="delete">评价</a>
                            <a class="more" style="float:right;" @click="delit(item.outTradeNo)"> 删除订单</a>
                        </div>
                </li>
            </ul>
        </div>
    </navbar>
 </div>

</mt-tab-container-item>
<!--未支付-->
<mt-tab-container-item :id="1">

<div v-for="item in tent"  @click="notpay(item.outTradeNo)">
    <navbar class="order-part" >
      <div class="order-list" >
            <ul class="order-list-ul">
                <li class="order-item">
                        <div class="item-part item-name">{{item.hotel.name}}</div>
                        <div class="item-part item-info">
                            {{item.startDate}}至{{item.endDate}} （{{Period}}晚）<br>
                            {{item.roomNum}}间 总价￥{{item.totalPrice}}元
                        </div>
                        <div class="item-part item-bottom">
                            <a  class="delete" @click="delit(item.outTradeNo)">删除订单</a>
                            <a class="more" style="float:right;" @click="pay(item.outTradeNo)"> 支付</a>
                        </div>
                </li>
            </ul>
        </div>
    </navbar>
 </div>

</mt-tab-container-item>
<!--未入住-->
<mt-tab-container-item :id="2">

<div v-for="item in tent" @click="notdetails(item.outTradeNo)">
    <navbar class="order-part" >
       <div class="order-list" >
            <ul class="order-list-ul">
                <li class="order-item">
                        <div class="item-part item-name">{{item.hotel.name}}</div>
                        <div class="item-part item-info">
                            {{item.startDate}}至{{item.endDate}} （{{Period}}晚）<br>
                            {{item.roomNum}}间 总价{{item.totalPrice}}
                        </div>
                        <div class="item-part item-bottom">
                            <a  class="delete" @click="refund(item.outTradeNo)">退款</a>
                            <a class="more" style="float:right;" @click=changes()> 改签</a>
                        </div>
                </li>
            </ul>
        </div>
   </navbar>
</div>

</mt-tab-container-item>
<!--已入住-->
<mt-tab-container-item :id="3">

<div v-for="item in tent" @click="checkin()">
     <navbar class="order-part" >
        <div class="order-list" >
            <ul class="order-list-ul">
                <li class="order-item">
                        <div class="item-part item-name">{{item.hotel.name}}</div>
                        <div class="item-part item-info">
                          <p>{{item.startDate}}至{{item.endDate}} （{{Period}}晚）</p>  
                           <p>{{item.roomNum}}间 总价￥{{item.totalPrice}}</p> 
                        </div>
                        <div class="item-part item-bottom">
                            <a  class="delete" @click="delit(item.outTradeNo)">删除订单</a>
                            <a class="more" style="float:right;"> 评价</a>
                        </div>
                </li>
            </ul>
        </div>
    </navbar>
 </div>

</mt-tab-container-item>
</mt-tab-container>

</div>
</template>

<script type="es6">
import { Navbar, TabItem,MessageBox,Indicator } from 'mint-ui';
import {api} from '../assets/js/common'
import notpay from '../views/notpay'
export default{

 data(){
  return {
    selected:{},
    listdata:[],
    sortselect:[],
      tent:[],
      status:"",
      startDate:"",
      endDate:"",
      Period:"",
      newItem:"",
      outTradeNo:"",
  }

},
components:{Navbar, TabItem,notpay},

//订单配置
created:function(){

      var self = this;
      this.$http.get(api+'/api/my/order/config').then((response) => {    
            if(response.body.result == "success"){
                 self.sortselect=response.body.list;
            }else{
                // error callback
            }  
      }, (response) => {
        // error callback
      });
      

},

methods:{

   select:function(type){
       Indicator.open({
      text: '加载中...',
      spinnerType: 'fading-circle'
     });
      var self = this;
      this.$http.get(api+'/api/my/order/list?page=1',{ params:{type:type } }).then((response) => {    
             Indicator.close();
           self.tent=response.body.list;
           //self.outTradeNo=response.body.list.outTradeNo;
           //console.log(self.outTradeNo);
           for (var i=0;i<response.body.list.length;i++)
           {
               self.status=response.body.list[i].orderStatus;
               //酒店点击按钮
               self.startDate=response.body.list[i].startDate.toLocaleString().substr(5);
               self.endDate=response.body.list[i].endDate.toLocaleString().substr(5);
               var x = new Date(self.endDate) - new Date(self.startDate);
               self.Period = x/(3600000*24);
               
             }
           
      }, (response) => {
     
        // error callback
      });
      

},

//支付的请求
pay:function(outTradeNo){
      var self = this;
      this.$http.post(api+'/api/hotel/pay/exist/order',{outTradeNo:outTradeNo }).then((response) => {    
           //self.tent=response.body.list;
           if(response.body.result == "success"){
                  var message="支付成功";
                   MessageBox.alert(message, "提示");
           }else{
                 var message=response.body.message;
                  MessageBox.alert(message, "提示");
           }
      }, (response) => {
     
        // error callback
      });
      

},

  //未入住详情
  notdetails:function(outTradeNo){
          
      var self = this;
              this.$http.post(api+'/api/my/order/del',{outTradeNo:outTradeNo }).then((response) => {
                      this.$router.push('/notdetails');
              }, (response) => {
             
                // error callback
                }); 
       
  },
  //未支付详情
  notpay:function(outTradeNo){
            this.outTradeNo=outTradeNo;
            //console.log(this.outTradeNo);
                      this.$router.push('/notpay');
                      
  },
  
  //已入住详情
  checkin:function(){
                      this.$router.push('/checkin');
  },
  
   
  //删除订单的请求
  delit:function(outTradeNo){
     MessageBox.confirm('是否删除订单').then(action => {
      var self = this;
              this.$http.post(api+'/api/my/order/del',{outTradeNo:outTradeNo }).then((response) => {
                       var message=response.body.message;
                       var title="提示";
               MessageBox.alert(message, title);
              }, (response) => {
             
                // error callback
                }); 
         });

},

 //改签的请求
 changes:function(){
      var vm=this;
      MessageBox({
              title: '温馨提示',
              message: '改签请联系客服',
              showCancelButton: false
            });
 },
 
 //退款请求跳转
 refund:function(outTradeNo){
      MessageBox.confirm('是否退款').then(action => {
      var self = this;
              this.$http.post(api+'/api/my/order/refund',{outTradeNo:outTradeNo }).then((response) => {
                       var message=response.body.message;
                       var title="提示";
               MessageBox.alert(message, title);
              }, (response) => {
             
                // error callback
                }); 
         });

},

}
}
</script>
<style scoped="scoped">
.mint-tab-container{

  margin-top: 3px;

}
.mint-navbar .mint-tab-item.is-selected {

border-bottom: 3px solid #77a984;
color: #77a984;
margin-bottom: -3px;

}

ul {

display: block;
list-style-type: disc;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
list-style: none;
width: 92%;
height: 40px;
line-height: 26px;
margin-left: 4%;
height: 100%;

}

ul li {

width: 100%;
float: left;
text-align: center;
border: 1px solid #D2D2D2;

}
</style>

Answer 1

用vuex,prop是父组件向子组件传递数据

简单使用示例，
https://github.com/TIGERB/eas...

Answer 2

问题太长了~~楼上正解，props是用于父组件往子组件传递值的。

再一个也没看到你往详情页传值。