首页 > 其他分享 >uni-app清空父组件下拉框时清空子组件下拉框的值

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

时间:2023-10-09 21:46:11浏览次数:31  
标签:console log selectvalue text value 组件 下拉框 select 时清

父组件:

<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)
          }
        },

 

标签:console,log,selectvalue,text,value,组件,下拉框,select,时清
From: https://www.cnblogs.com/Insist-Y/p/17753235.html

相关文章

  • Vue组件各个属性执行顺序问题
    转自:https://blog.csdn.net/m0_62763606/article/details/131694339       在制作波动短视频效果时,在data中定义了一个变量,默认值为null。后来该变量在mounted中被赋值,而后在watch侦听属性中使用立即侦听时使用了该变量却显示为null,后发现这关系到各个组件属性执行顺序问......
  • v-model 原理、v-model 应用于组件 实现组件通信
    原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value属性和input事件的合写(如果应用于复选框,就是checked属性和change事件的合写,下拉菜单是value属性和change事件的合写)作用:提供数据的双向绑定     ①数据变,视图跟着变  :value   ......
  • 使用 Webpack 的 require.context 来获取组件
    代码constrequireComponent=require.context('@/views',//组件文件夹的相对路径true,//是否查找子文件夹/\.vue$///匹配组件文件的正则表达式)输出console.log(requireComponent.keys())原理require.context在生产环境中也能获......
  • 关键组件
    Tamagui提供各种本机和Web组件,例如按钮、开关、堆栈、输入、工作表等。然而,它提供的不仅仅是一个漂亮的组件库,它还有自己的编译器,可以扁平化您的组件树并修改您的样式以最适合您的应用程序运行的任何平台。可以在Expo和Next.js应用程序中使用,允许您在本机应用程序和Web......
  • 组件通信方案
    组件通信是指组件与组件之间的数据传递。组件的数据是独立的,无法直接访问其他组件的数据,想用其他组件的数据,需要通过组件通信方案。 组件关系分类:父子关系、非父子关系 组件通信方案:父子关系:props(父传子)和$emit(子传父)非父子关系:①provide&inject     ......
  • 风控指南 | 风控引擎如何快速管理组件?
    风控组件是指在风险控制系统中用于监测、识别和处理各类风险行为的模块或工具。它们通过使用不同的算法、规则和技术,协助机构或企业实施有效的风险管理和防范措施。风控组件通过数据分析、模型建立、规则引擎等技术手段,帮助机构或企业及时识别和预警各类风险行为,并采取相应的措施......
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack
    堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。该组件从APIVersion7开始支持。可以包含子组件。一、接口Stack(value?:{alignContent?:Alignment})从APIversion9开始,该接口支持在ArkTS卡片中使用。二、属性除支持通用属性外,还支持以下属性:三、示例//xxx.e......
  • 全局组件的注册和使用
    全局注册:所有组件内都能直接使用。在多个组件范围内使用的通用的组件就可以定义成全局组件 步骤:①创建.vue文件(三个组成部分)      ②main.js中进行全局注册            //(import 组件对象 from '.vue文件路径')    ......
  • 22-Vue组件化编程
    使用传统的方式编写应用传统的方式,一般离不开前端的三大件(HTML、CSS、JS)HTML:HTML是超文本标记语言(HyperTextMarkupLanguage)是用来描述网页的一种语言,负责网页的架构CSS:CSS是一种层叠样式表(级联样式表、样式表),是⼀种标记语⾔,负责网页的样式,美化JavaScript(JS):JS是运行在客户......
  • 实现starter组件自动装配以及可配置
    实现starter组件自动装配以及可配置自动装配的包,导入就可以进行自动装配了<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-autoconfigure</artifactId><version>2.1.4.RELEASE</version></dependency>......