uniapp封裝組件及父子組件傳值

1. 封裝子組件 （子組件通過"props"接受父組件傳的值，在子組件中定義props屬性，type可以自定義類型（但是必須和父組件中的數據類型一致，否則會報錯），default是默認值。）

<template>
	<div class="adsList">
		<div class="cardItem" v-for="item in cardList" :key="item.index">
			<div class="cardLogo">
				<div class="adsLogo">
					<image :src="item.icon" class="adsIcon"></image>
					<p>{{item.name}}</p>
				</div>
				<checkbox-group @change="checkChange" v-if="cardType=='choose'">
					<checkbox :checked="item.checked" :value="item.name" />
				</checkbox-group>
				<image src="../../static/imges/icon/write.png" class="editIcon" @click='toEdit(item)' v-if="cardType=='edit'"></image>
			</div>
			<div class="adsInfo">{{item.con?item.con:'----'}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			cardList: {
				type: Array,
				default () {
					return []
				}
			},
			cardType: {
				type: String,
			},
			used:{
				type: Boolean
			}
		},
		data() {
			return {}
		},
		methods: {
			checkChange(e) {
				let val = e.detail.value;
				console.log(val, 'ppppppppp')
			},
			toEdit(item) {
				console.log(this.$props.used,'66666666666')
				uni.navigateTo({
					url: `/pages/content/editAds/index?info=${JSON.stringify(item)}&used=${this.$props.used}`
				});
			}
		}
	}
</script>

<style lang="less" scoped>

</style>

　　2. 在父組件中引入，注冊，傳值 （ 父組件通過“：”傳值 ）

<template>
	<div class="wrapper">
		<div class="adsHead">
			<div class="adsRead">
				<checkbox-group @change="checkChange">
					<checkbox :checked="checked" />
				</checkbox-group>
				<p>Address only</p>
			</div>
			<div class="adsSearch">
				<input type="text" v-model="searchVal" @input="changeVal" class="searchInp" />
				<image src="../../../static/imges/icon/searchAds.png" class="searchIcon" />
			</div>
		</div>
		<adsCard :cardList='cardList' cardType='edit' :used='used' />
	</div>
</template>

<script>
	import adsCard from '../../../components/adsCard/index.vue'
	export default {
		components: {
			adsCard
		},
		data() {
			return {
				checked: false,
				used: false,
				searchVal: '',
				cardList: [{
						icon: '../../../static/imges/icon/btg.png',
						name: 'BTG',
						con: '14654986535498645385',
						checked: false
					},
					{
						icon: '../../../static/imges/icon/CCL.png',
						name: 'ETH',
						con: '',
						checked: false
					},
					{
						icon: '../../../static/imges/icon/OKB.png',
						name: 'BTG',
						con: 'dfghjklkjcgfdtgfhjk',
						checked: false
					}
				]
			}
		},
		onReady() {
			this.setTitle(this.$t("Users.address"))
		},
		methods: {
			changeVal() {
				this.searchVal = e.target.value
			},
			checkChange(e) {
				this.checked = !this.checked
			},
		}
	}
</script>

<style lang="less" scoped>

</style>