开始

整个代码块

css也复制过来

复制method方法过来。

复制到上面

这部分数据

把方法复制过来，选择图片，预览图片，删除图片这三个方法

父组件内定义属性，传递给子组件。

子组件内

this.$emit('upload',this.imageList);

子组件内删除成功后。通知父组件。

引入子组件

import uploadImages from '@/components/common/upload-images.vue';
components:{
    uploadImages,
},

使用组件

<upload-images @upload="upload"></upload-images>

监听事件

打印这个数组

删除的方法也监听一下

<upload-images @upload="upload" @delect="delect"></upload-images>
删除的method
delect(arr) {
                console.log(arr);
            }

测试

控制台打印的数组

删掉一张图片后也打印了

最终组件代码

<template>
    <view>
        <uni-nav-bar :statusBar="true" rightText="发布" 
        left-icon="back" left-text="返回"
        @clickLeft="back" @clickRight="submit">
            <view class="u-f-ajc" @tap="changelook">
                {{ yinsi }}
                <view class="icon iconfont icon-xialazhankai"></view>
            </view>
        </uni-nav-bar>
        <!-- <uni-nav-bar :statusBar="true">
            <block slot="left">
                <view class="back"></view>
            </block>
            <view class="u-f-ajc" @tap="changelook">
                {{ yinsi }}
                <view class="icon iconfont icon-xialazhankai"></view>
            </view>
            <block slot="right">
                <view class="city">
                    发布
                </view>
            </block>
        </uni-nav-bar> -->
        <!-- 多行输入框 -->
        <view class="uni-textarea">
            <textarea value="" v-model="text" placeholder="说一句话吧~" />
        </view>
        <upload-images @upload="upload" @delect="delect"></upload-images>
    </view>
</template>
<script>
    import uploadImages from '@/components/common/upload-images.vue';
    let changelook = ['所有人可见', '仅自己可见'];
    export default {
        components:{
            uploadImages,
        },
        data() {
            return {
                yinsi: "所有人可见",
                text: "111",
                imageList: [],
            }
        },
        methods: {
            // 返回
            back(){
                uni.navigateBack({
                    delta: 1
                })
            },
            // 发布
            submit(){
                console.log('发布')
            },
            // 隐私
            changelook(){
                console.log('隐私')
                uni.showActionSheet({
                    itemList: changelook,
                    success: function (res) {
                        console.log(res.tapIndex);
                        console.log(changelook[res.tapIndex]);
                        this.yinsi=changelook[res.tapIndex];
                    }
                });
            },
            upload(arr) {
                this.imageList=arr;
                console.log(this.imageList);
            },
            delect(arr) {
                console.log(arr);
            }
        }
    }
</script>
<style>
    textarea{
        border: 1upx solid #EEEEEE;
    }
/* .uni-navbar__header-container {
    justify-content: center;
} */
</style>

结束