页面组件

---

组件是视图层的基本组成单元。也是一个单独且可复用的功能模块的封装。 在本项目中除了uni-app的基本组件，还对一些公共可复用的模块进行了封装，常用场景为列表显示。我们以此为例，新建一个简单可复用组件，其新建目录为：components/custom， 命名文件：test。

组件新建

在components/custom该目录下右击新建vue页面。 props接收父组件传来的参数，$emit传递子组件的参数。

<view>
    <view v-for="(item,index) in list" :key="index">
             <view @click="clickData(item)">{{item}}</view>
    </view>
</view>

props: {
    list: {
        type: Array,
        default: ()=>[]
    }
}

methods: {
    clickData(item){
         this.$emit("change"，item)
    }
}

使用方式

list为传递给子组件的数据，@change为子组件点击事件的回调

<test-box ref=="testbox" :list="testList" @change="change"></test-box>

import testBox from '@/components/custom/test.vue'

components: {
testBox
},
data(){
return{
testList: [],
}
}

methods: {
change(item){
...  //操作
}
}