vue 子组件和父组件的关系及子父组件如何传值？

做过vue项目，肯定听过子组件父组件这些关键字，小编我刚听到时根据自己的理解，就像移动端的子试图，父试图的概念，在使用的过程中，才正真理解子父组件的使用方法。

下面介绍下在项目具体使用方法：

当我们新建一个vue项目时，观察项目结构，看到上图所示 src ---->components ,这个文件夹下就是需要我们自己创建vue子组件。

下面以如下图实现的弹出框效果图来介绍两者之间的调用关系，及传值过程。

实现原理：

弹出框是子组件，点击弹出时，父组件要给子组件传支付金额，点击子组件完成后，子组件要给父组件传支付类型。

总结知识点：

(1).父组件如何调用子组件？

(2).父组件如何向子组件传支付金额？

(3).子组件如何回调给父组件支付类型？

具体实现过程：

先在scr--->components下建立以名为usePayType的子组件，创建后，在

<template>//页面样式
  <div class="self-modal" v-show='showModal' @click="cancelClick" v-bind:style="styleObj">
    <div class="career"  @click.prevent.stop>
      <div class="bgHeader">
        <div>确认付款</div>
        <img class="close" src="../../../static/images/Close@2x.png"  @click="cancelClick">
      </div>
      <div class="price">¥{{sumPrice}}</div>
      <div class="wxPay" @click="selectPay('wx')">
        <div class="bgPay">
          <img class="wxLogo" src="../../../static/images/wx.png">
          <div class="wxType">微信支付</div>
        </div>
        <img class="selectedPay"  v-bind:src="selectPayWx" >
      </div>
      <div class="zfbPay" @click="selectPay('zfb')">
        <div class="bgPay">
          <img class="wxLogo" src="../../../static/images/zfb.png" >
          <div class="wxType">支付宝</div>
        </div>
        <img class="selectedPay"  v-bind:src="selectPayAli" >
      </div>
      <div class="bottom"  @click="sureClick">完成</div>
    </div>
  </div>
</template>

解决问题1.父组件如何引用子组件？

先在父组件中引入相应位置的子组件，定义子组件，然后使用子组件。

解决问题2.父组件如何向子组件传支付金额

   先在子组件的pros 定义金额变量，在

  父组件使用子组件时，把值传给对应的变量

实现效果图：

解决问题3.子组件如何回调给父组件支付类型

父组件在使用子组件的中定义一个方法

<usePayType :payPrice = '300' @submitOrder="submitOrder"></usePayType>

submitOrder (data){
 //在此写接受子组件传来的值data
}

子组件使用$emit放发发送给父组件值

//选中支付类型，点击完成
sureClick () {
  this.$emit('submitOrder','wx_pay')//下单
},

submitOrder 就是父组件定义的方法。

OK！问题解决！

但是在做的过程中，发现一个更方便的方法，用refs，可以直接拿到子组件的方法和属性值。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上,$refs 是所有注册过的ref的一个集合.

上面的子组件用refs的使用方法如下：

父组件操作：

<usePayType ref="getPayType" @submitOrder="submitOrder"></usePayType>

// 提交订单
gotoPay () {
  this.$refs.getPayType.sumPrice = this.sumMoney
  this.$refs.getPayType.showModal = true
},

打印this.$resf.getPayType可以看到

this.$resf.getPayType就代表是子试图，这里只是调用的data中的变量，也可以点用methods中的方法，当我们想改变父组件传给子组件的值时，因为在子组件mounted中，当初还未拿到传过来的值，就完全可以利用resf调用子组件methods中来实现！

有些地方表述不一定清晰，又不理解的地方，随时评论！

本文独发金蝶云社区！