vue访问组件的数据和方法

wiseyao1219

已于 2024-09-29 20:10:19 修改

阅读量577

点赞数 1

文章标签： vue.js javascript 前端

于 2024-09-29 20:05:29 首次发布

本文链接：https://blog.csdn.net/m0_37570176/article/details/142642616

版权

组件源码

<template>

	<view class="c_container" :style="myStyle" @click="clickCust">
		<view style="font-size: 18px;text-align: center;">{{item.name}}</view>
		<view style="margin-top: 10px;font-size: 10px;">
			<view style="text-align: center;">
				{{item.sex+"&nbsp;&nbsp;&nbsp;"+item.age+"岁"}}
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		name: "Customer",
		props: {
			item: {
				type: Object,
				default: {
					id: 0,
					name: "王美丽",
					sex: '女',
					age: 24
				}
			},
			selected: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			selected(val) {
				console.log("watch,selected", this.selected);
				this.isSelected = this.selected;
			}
		},
		data() {
			return {
				isSelected: false,
				selectedColor: '#ffffff',
				unselectedColor: '#f4f4f4',
				borderColor: '#1296db',
				myStyle: ''
			};
		},
		mounted() {
			this.setStyle();
		},
		methods: {
			setStyle() {
				if (this.isSelected) {
					//选中
					this.myStyle = {
						"background-color": this.selectedColor,
						border: "1px solid " + this.borderColor
					};
				} else {
					//没选中
					this.myStyle = {
						"background-color": this.unselectedColor,
						border: "none"
					};
				}
				console.log("this.myStyle", this.myStyle);
			},
			clickCust() {
				this.isSelected = !this.isSelected;
				console.log("clickCust,isSelected", this.isSelected);
				this.setStyle();
				this.$emit("clickCust", {
					id: this.item.id,
					isSelected: this.isSelected
				});
			}
		}
	}
</script>

<style>
	.c_container {
		/* float: left; */
		height: 60px;
		width: 150px;
		border: 1px solid;
		padding-top: 20px;
		border-radius: 15px;
		margin-right: 10px;
	}
</style>

调用组件

<template>
	<view class="s_container">
		<uni-nav-bar :fixed="true" dark background-color="#007AFF" title="预约咨询" class="nav" left-icon="left"
			@clickLeft="back" />
		<view class="c_box">
			<view>
				<image mode="widthFix" style="width: 100%"
					src="/static/images/myimages/fetal_counseling/fetal_counseling_1.jpg"></image>
			</view>
			<view class="box2">
				<view class="box2_title_box">
					<view class="box2_title">选择服务客户</view>
					<view class="box2_right" @click="addCustomer">+添加</view>
				</view>
				<scroll-view :scroll-x="true" style="width: 100%;padding: 10px 0;">
					<view style="width: 2000px;">
						<!-- <view class="card" v-for="item in customers"
							style="float:left;height: 60px;width: 150px;border: 1px solid ;padding-top: 20px;border-radius: 15px;margin-right: 10px;">
							<view style="font-size: 18px;text-align: center;">{{item.name}}</view>
							<view style="margin-top: 10px;font-size: 10px;">
								<view style="text-align: center;">
									{{item.sex+"&nbsp;&nbsp;&nbsp;"+item.age+"岁"}}
								</view>

							</view>
						</view> -->
						<Customer ref="cust" v-for="item in customers" :item="item" style="float: left;"
							@clickCust="clickCustomer">
						</Customer>
					</view>
				</scroll-view>
				<view style="clear: both;"></view>
				<view>
					<button @click="test">测试</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import Customer from "@/components/Customer.vue"
	export default {
		components: {
			Customer
		},
		data() {
			return {
				customers: [{
					id: 1,
					name: '王美丽',
					sex: '女',
					age: '24'
				}, {
					id: 2,
					name: '王美丽1',
					sex: '女',
					age: '24'
				}, {
					id: 3,
					name: '王美丽2',
					sex: '女',
					age: '24'
				}, {
					id: 3,
					name: '王美丽3',
					sex: '女',
					age: '24'
				}, {
					id: 4,
					name: '王美丽4',
					sex: '女',
					age: '24'
				}]
			}
		},
		methods: {
			back() {
				uni.showToast({
					title: '回退'
				})
			},
			addCustomer() {
				uni.showToast({
					title: '添加客户'
				})
			},
			clickCustomer(e) {
				console.log("clickCustomer,e", e);
			},
			test() {
				console.log("cust", this.$refs.cust);
				
				//调用数据
				console.log("cust[0]", this.$refs.cust[0].isSelected);
				
				//调用方法
				this.$refs.cust[0].clickCust();
			}
		}
	}
</script>

<style>
	.s_container {
		background-color: rgba(244, 244, 244, 1);

	}

	.c_box {
		padding: 8px 8px;
	}

	.box2 {
		padding: 5px;
		margin-top: 5px;
		background-color: #ffffff;
	}

	.box2_title_box {
		position: relative;
	}

	.box2_title {
		font-size: 14px;
		font-weight: bold;
	}

	.box2_right {
		position: absolute;
		right: 20px;
		top: 0px;
	}
</style>

调用组件数据和方法的代码

test() {
	console.log("cust", this.$refs.cust);
				
	//调用数据
	console.log("cust[0]", this.$refs.cust[0].isSelected);
				
	//调用方法
	this.$refs.cust[0].clickCust();
}