摘要由AI智能服务提供本文介绍了Vue项目中子组件与父组件的基本概念及具体使用方法。通过弹出框的示例，展示了子组件和父组件之间的调用关系和传值过程。总结了父组件如何调用子组件、如何向子组件传值，以及子组件如何回调给父组件值的知识点。文中还介绍了使用`refs`直接访问子组件方法和属性的方法，以及在实际操作中遇到的问题和解决方案。
做过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中来实现！
有些地方表述不一定清晰，又不理解的地方，随时评论！
本文独发金蝶云社区！
