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>