uni-app清空父组件下拉框时清空子组件下拉框的值

发布时间 2023-10-09 21:40:06作者: vba是最好的语言

父组件:

<template>
    <view>
        <view>这是登录界面
        <button @click="RedirdectToMain">跳转到首页</button>
        </view>
    </view>
    <view>
        <uni-file-picker 
            v-model="imageValue" 
            fileMediatype="image" 
            mode="grid" 
            @select="select" 
            @progress="progress" 
            @success="success" 
            @fail="fail" 
            @delete="deleted"
        />
        

    </view>
    <view>
        <uni-data-select @change="change_value" :clear="true" :model-value="selectvalue2" :localdata="select_value2"></uni-data-select>
        <AddItem  :select_range="select_value">
        </AddItem>
    </view>
</template>

<script>
import { SlowBuffer } from 'buffer'
    export default {
        data() {
            return {
                imageValue:[],
                selectvalue2: "",
                select_value2:[
                    {
                        value:"1",
                        text:"1"
                    },
                    {
                        value:"2",
                        text:"2"
                    }
                ],
                selectvalue: "",
                select_value:[
                    {
                        value:"1",
                        text:"1"
                    },
                    {
                        value:"2",
                        text:"2"
                    }
                ]
            }
        },
        methods: {
            change_value(value){
                    this.selectvalue2 = value
                    if(value)
                    {
                        this.select_value = [{
                            value:"3",
                            text:"3"
                        },
                        {
                            value:"4",
                            text:"4"
                        }]
                    }else{
                        console.log("选择的是空")
                        //this.selectvalue = ""
                        this.select_value = [
                            // {
                            //     value:"5",
                            //     text:"5"
                            // },
                            // {
                            //     value:"6",
                            //     text:"6"
                            // }
                        ]
                    }
                    
            },
            RedirdectToMain(){
                console.log("跳转了")
                uni.switchTab({
                    url: "/pages/index/index",
                })
            },
            
                
                        // 获取上传状态
                        select(e){
                            console.log('选择文件:',e)
                            console.log(this.imageValue)
                            this.imageValue.splice(0, 1)
                            this.deleted(e)
                            // console.log(tempFile)
                            // this.tempFile.tempFilePath = ""
                        },
                        // 获取上传进度
                        progress(e){
                            console.log('上传进度:',e)
                        },
                        
                        // 上传成功
                        success(e){
                            console.log('上传成功')
                        },
                        
                        // 上传失败
                        fail(e){
                            console.log('上传失败:',e)
                        },
                        deleted(e){
                            console.log('删除图片:',e)
                        }
                    
            
            
            
        }
    }
</script>

<style>

</style>

子组件:

<template>
    <view>
        <uni-data-select @change="change_value" :clear="true" :model-value="selectvalue" :localdata="select_range"></uni-data-select>
    </view>
</template>

<script>
    export default {
        name:"AddItem",
        data() {
            return {
                selectvalue: ""
                
            };
        },
        methods:{
            change_value(value){
                this.selectvalue = value
            },    
        },
        computed: {
          propValue() {
             return this.select_range; // propName 是从 props 中接收的数据
          }
        },
        watch: {
          propValue(newVal, oldVal) {
              console.log("watch事件")
              // 在 propValue 变化时执行逻辑
              this.selectvalue = "";
              console.log("selectvalue的值",this.selectvalue)
          }
        },

        // watch:{
        //      select_range: function(newVal) {
        //         this.selectvalue = "";
        //       },
        // },
        props:{
            select_range:Array
        }
    }
</script>

<style>

</style>

关键代码 在子组件中:

        computed: {
          propValue() {
             return this.select_range; // propName 是从 props 中接收的数据
          }
        },
        watch: {
          propValue(newVal, oldVal) {
              console.log("watch事件")
              // 在 propValue 变化时执行逻辑
              if(this.select_range == []){
                  this.selectvalue = "";
              }
              console.log("selectvalue的值",this.selectvalue)
          }
        },