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) } },
浙公网安备 33010602011771号