组件源码

javascript"><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>

调用组件

javascript"><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>

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

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