vue组件的使用及父子组件之间通信

之前了解到vue父子组件之间传值：

父组件传给子组件：通过在页面引用里 传值：

在父组件内引入子组件
<childCompont :parmas="parentParmas"></childCompont>
那么父组件的 parentParmas就会传入子组件内；
子组件接收：

props:{
			
			parmas:Object //这里写数据类型
		},

 子组件传给父组件一般通过事件：

//子组件
<view @click="toParent">传给父组件</view>

<script>
export default{
    methods:{
        toParent(){
            this.$emit('parentClick')
        }
    }
}
</script>

//父组件引用

<children @parentClick="zhixingChild"></children>

methods:{
    zhixingChild(){
        console.log("父组件执行了子组件事件")
    }

}

做了一个uniapp，其中用到了vue组件的使用及父子组件传值。

场景是这样的：点击父组件的一个按钮调用子组件（是一个弹框），但是要传值进去，子组件也会有值传到父组件。就是父子组件有通信。

代码如下：

父组件：orderMain.vue; 相关代码：

<view v-show="item.complain_flag == 0" class="qiangdanBtn tousu" @click="complaint(item)">去投诉</view>

<Complain :show="boxshow" @guanbi="guanbi" :forinfo="forinfo" @compClick="confirmCompl"></Complain>

<script>
    import Complain from './complain.vue';
    export default{
    components:{
        Complain,
    },
    name: 'orderMain',
data(){
    return{
       boxshow :false,
       forinfo: null,
    }
}
    methods:{
    complaint(e) {
			console.log(e);
			this.boxshow = true;
			this.forinfo = e;
		},
}
}
</script>

子组件complain.vue相关代码：

<template>
	<view class="content">
		<!-- 投诉弹框 -->
		<u-mask :show="show" >
			<view class="warp">
				<!-- 中间内容 -->
				<view class="rect" @tap.stop>
					
					<view class="rectTop">
						<view class="customAvatar"><image :src="fromshow.avatar_img+'/132'"></image> </view>
						<view class="topRight">
							<view class="complainCustom">投诉用户—{{fromshow.wx_name}}</view>
							<view class="close" @click="add">
								<image src="../static/guanbi.png"></image>
							</view>
						</view>
					</view>
					<view class="rectMain">
						<view class="selectReson">
							<view class="sr_left">选择原因</view>
							<view class="sr_right" @click="complaintReasons">
								<view class="srText">{{srText}}</view>
								<image class="toRight" src="../static/toRight.png"></image>
							</view>
							<view class="dropDown" v-show="showDrop">
								<view class="listLi" v-for="(item,index) in resonList" @click="chooseReason(item)">{{item.cause}}</view>
							</view>
						</view>
						<view class="uni-textarea">
							<textarea v-model="complainText" placeholder="请输入投诉内容"></textarea>
						</view>
						<view class="sureBtn" @click="confirmComplaint(complainText)" >确认投诉</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

export default {
		props:{
			show:Boolean,
			forinfo:Object //这是父组件传过来的值（对象）
		},
		
		data(){
			return {
				fromshow:Object.assign({},this.forinfo),
				showDrop:false,
				resonList:[
					{cause:"测试一"},
					{cause:"测试二"},
					{cause:"测试三"},
					{cause:"测试四"}
				],
				srText:"请选择投诉原因",
				complainText:""
			}
		},
		watch:{
			forinfo(){ //这里要经过watch事件做判断
				if(this.forinfo){
					this.fromshow=Object.assign({},this.forinfo);
					
				}
			}
		},
		methods:{
			//获取投诉原因选项
			complaintReasons(){
				let that = this;
				that.showDrop = !that.showDrop;
				this.$request("?s=Recycle.Order.GetComplaint",{
					
				}).then(res=>{
					console.log(res);
					if(res.code==200){
						that.resonList = res.data.data
					}else if(res.code==400){
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:3000
						})
					}else{
						uni.showToast({
							title:"请求错误",
							icon:"none",
							duration:3000
						})
					}
				})
			},
			//选择原因
			chooseReason(e){
				console.log(e);
				this.srText = e.cause;
				this.showDrop = false
			},
			//确认投诉
			confirmComplaint(e){
				console.log(e);
				let that = this;
				let complData=new Object;
				complData['text'] = e;
				complData['cause'] = that.srText;
				complData['order_id'] = that.fromshow.id;
				this.$emit("compClick",complData);
				
			},
			
			add(){
				this.$emit('guanbi')
			}
		}
	}

文章篇幅比较长，感谢大家耐心看完。vue组件是vue框架的一大特色，它也广泛应用于微信小程序，uniapp中。组件之间的传值更是vue的精髓所在，用组件化开发确实方便了很多，也可精简代码。为开发者（程序员）提供了方便，自己也可以写一些常用的组件，方便之后项目的开发。

网上有很多技术大佬把组件传值的多种方法讲得很详细的。本博主技术有限，可能只讲到了一些浅显的东西。可能会被贻笑大方~~ 路过的朋友们，欢迎指点。