vue父组件向子组件传值和方法

在开始前，我们先开科普下父子组件的关系，简单来说：谁被引入，谁就是子组件；谁引入，谁就是父组件。

所有的组件都可能是子组件，比方说你爸爸可以有3个儿子(子组件)，同时你爸爸也是你爷爷的N个儿子之一，而你，也可以有N个儿子。具体的话可以找下各位大佬的父子组件关系贴，这里不多赘述直接开始。

Refund.vue文件通过props:["lists","goDetails"]来接收父组件传过来的lists值与goDetails方法

<template>
  <div class="container">

    <div class="container-title">
      <ul>
        <li>订单号</li>
        <li>发起退款时间</li>
        <li>退款进度</li>
        <li>金额</li>
        <li>操作</li>
      </ul>
    </div>

    <div class="container-form">
      <ul v-for="list in lists" :key="list.id">
        <li v-if="list.refundCode">{{list.refundCode}}</li>
        <li v-else>{{list.orderCode}}</li>
        <li v-if="list.applyTime">{{list.applyTime}}</li>
        <li v-else>{{list.createTime}}</li>
        <li v-if="list.refundStatus===0">申请退款中</li>
        <li v-else-if="list.refundStatus===1">服务商同意退款</li>
        <li v-else-if="list.refundStatus===2">服务商拒绝退款</li>
        <li v-else-if="list.refundStatus===3">退款成功</li>
        <li v-else-if="list.refundStatus===4">平台拒绝退款</li>
        <li v-else-if="list.orderStatus===330">申请退款中</li>
        <li style="color: red">￥{{list.actualMoney}}</li>
        <li><a style="color: #00a0ff" @click="goDetails(list)">详情</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Refund",
        props:["lists","goDetails"]
    }
</script>

<style lang="less" scoped>

  .container{
    margin-top: 15px;
    position: relative;
    .container-title{
      background-color: #f5f5f5;
      border: 1px solid #e7e7e7;
      width: 880px;
      height: 40px;
      line-height: 40px;
        ul{
          li{
            display:inline-block;
            width: 160px;
            /*margin-right: -5px;*/
            text-align: center;
            font-size: 14px;
          }
        }
      }
    .container-form{
      margin-top: 10px;
      ul{
        li{
          font-size: 15px;
          width: 160px;
          text-align: center;
          display:inline-block;
          border-bottom: 1px solid #e7e7e7;
          margin-bottom: 10px;
          line-height: 40px;
          height: 40px;
        }
      }
    }
    }
</style>

而父组件HousekeepingRefund.vue则通过:lists="lists" :goDetails="goDetails"向子组件传值和方法

<template>
  <div>
    <Refund :lists="lists" :goDetails="goDetails"></Refund>
  </div>
</template>

<script>
  import Refund from "./Refund";
    export default {
        name: "HousekeepingRefund",
        components:{Refund},
        data(){
            return{
                lists:[]
            }
        },
        created(){
            this.getData()
        },
        methods:{
            getData(){
                this.$axios.get(this.GLOBAL.JiedanURL).then(res =>{
                    this.lists = res.data.data.list;
                })
            },
            goDetails(list){
                console.log(list)
            }
        }
    }
</script>

<style scoped>

</style>

来看下运行结果吧

而点击详情

一个简单的dome就完成了，只要你接口的命名相同，那么你只需要写一个父组件引用该子组件，即可使用。

直接复制粘贴可能会出问题，CSS的编译是less，你还需要安装下less哦。