uni-app清空父组件下拉框时清空子组件下拉框的值
父组件:
<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) } },