本文共 3355 字，大约阅读时间需要 11 分钟。

1.写一个简单的子组件main/index.vue：

在子组件中有一个childMethod方法

2.在父组件中引用这个子组件的childMethod方法：

（一）子组件---->父组件

//view中

//js的return中  return:{
   	title:'son'}

//在methods中进行传值

methods:{
   	click(){
     this.$emit('change',this.title)	}}

父组件（接收）

//view中

   
    //js的return中  return:{
   	title:''}
   

//在methods中进行接收

methods:{
   	change(res){
   	console.log(res)	this.title=res	}}

（一）父组件---->子组件

//view中

   //js的return中  return:{
   	text:"i am father"}

子组件（接收）

//view中

   
    {
   {
   text}}
    
     //js的props中 props:['text']  //或者text:{
    type:String //定义类型  default:""  //默认值         }
    
   

完整的

//这是父组件的东西
   //子组件的
   

样式

@import '/static/css/font_icon.css';.res_tk {
   	box-sizing: border-box;	background-color: rgba(0, 0, 0, 0.5);	position: fixed;	top: 0;	left: 0;	height: 100vh;	width: 750rpx;	z-index: 2001;}.tk_bs {
   	box-sizing: border-box;	position: absolute;	bottom: 0;	left: 0;	background-color: #FFFFFF;	width: 750rpx;	border-radius: 20rpx 20rpx 0px 0px;	animation-iteration-count: 1;	animation: mymove2 0.3s;	-webkit-animation-iteration-count: 1;	backface-visibility: hidden;}@keyframes mymove2 {
   	0% {
   		transform: translate(0rpx, 100vh)	}	100% {
   		transform: translate(0rpx, -0vh)	}}@-webkit-keyframes mymove2 {
   	0% {
   		transform: translate(0rpx, 100vh)	}	100% {
   		transform: translate(0rpx, -0vh)	}}.bts {
   	width: 750rpx;	height: 100rpx;	text-align: center;	line-height: 100rpx;}.bt_h1 {
   	color: #333333;	font-size: 40rpx;}.Xx_xxi {
   	width: 20rpx;	height: 36rpx;	margin: 36rpx 8rpx 0 0;	position: absolute;	top: 0;	right: 24rpx;	display: flex;	justify-content: center;	align-items: center;}.nei_x1 {
   	transform: rotate(45deg);	width: 20rox;	height: 100%;	border: 2rpx solid #666666;}.nei_x2 {
   	margin: 0 0 0 -4rpx;	transform: rotate(-45deg);	width: 20rox;	height: 100%;	border: 2rpx solid #666666;}.order {
   	width: 750rpx;	display: flex;	align-items: center;	justify-content: space-between;	box-sizing: border-box;	border-bottom: 2rpx solid #F4F4F4;	padding: 34rpx 24rpx;	color: #333333;	font-size: 28rpx;}.order_img {
   	width: 44rpx;	height: 44rpx;	padding: 0 10rpx 0 0;}.order_yellow {
   	font-size: 24rpx;	color: #EA3323;}.bt_qd {
   	width: 460rpx;	height: 34rpx;	background: #4F77E1;	border-radius: 40rpx;	margin: 40rpx auto;	padding: 20rpx 0;	font-size: 32rpx;	color: #FFFFFF;}.reason_active {
   	width: 24rpx;	height: 24rpx;	background-color: #FFFFFF;	border: 2rpx solid #999999;	border-radius: 50% 50%;}.flex_a{
   	display: flex;	justify-content: space-between;	align-items: center;}.flex_b{
   	display: flex;	justify-content: center;	align-items: center;}.flex_d{
   	display: flex;	align-items: center;}

转载地址：https://blog.csdn.net/YUlangML/article/details/117703372 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！