情景:
我想在父组件用props传值给子组件几个值来控制子组件中对应的几个类目的显示和隐藏,几个类目是子组件中通过data里的一个数组的数据循环出来的,所以一开始我想在子组件那个数组中添加一个公共的属性名,值就取拿回来的props值,在dom里通过这个新增的属性的取值(也就是传回来的props值)动态的控制几个类目展示不展示即可,然后就掉坑里了。。。。。
父组件:
<child
:first="first" // 传值给子组件的值
:second="second"
:third="third"
>
</child>
data(){
return{
first:1, //data中初始化数据
second:1,
third:1
}
}
methods:{
getData(params) //请求接口数据给传的参赋值
.then((response)=>{
this.first = response.first
this.second = response.second
this.third = response.third
})
}
子组件:
//dom结构通过取到的props值来控制类目的隐藏显示
<div v-for="(item,index) in sideData" :key="index">
<div :style="{display:item.status==0 ? 'none': 'block'}">{{item.name}}</div>
</div>
props:{
first:{
type:Number,
default:function(){
return 0
},
},
second:{ //second、third和first同理
},
third:{
},
}
data(){
return{
sideData:[
{
name:'1',
status:first, //新起的一个属性名,并且拿取到的props赋值
},
{
name:'2',
status:second,
},
{
name:'3',
status:third,
},
]
}
}
结果:
发现子组件的类目并不会随着props的变化而变化,结果并不能达到预期,是因为在data中声明局部变量,并用props初始化,局部变量不随着props更新而更新
我换了种方法实现并实现一些优化,亲测有效!!!
父组件:
<child
:content="content" //把多个数据放到一个数组中一起传
>
</child>
data(){
return{
content:[{'1',isShow},{'2',isShow},{'3',isShow}]
}
}
methods:{
getData(params)
.then((response)=>{
this.content.map((item,index)=>{ //遍历要传参的这个数组,满足对应条件给赋值
if('满足对应的条件'){
this.content[index].isShow = false
}
})
})
}
子组件:
<div v-for="(item,index) in sideData" :key="index">
<div :style="{display:item.isShow == true ? 'block': 'none'}">{{item.name}}</div>
</div>
props:{
content:{
type:Array,
default:function(){
return []
},
},
}
data(){
return{
sideData:[
{
name:'1',
isShow:true, // 统一添加一个公共的属性名
},
{
name:'2',
isShow:true,,
},
{
name:'3',
isShow:true,
},
]
}
}
watch:{
handler(newVal){
let arr = [...this.sideData]; //这步是为了避免修改新对象数组改变原对象数组
arr.map((item)=>{
newVal.map((_item)=>{
if(item.id == _item.id){
item = _item
}
})
})
this.sideData = [...arr]
},
deep:true
immediate:true
}
结论:
注意:
- 在data中声明局部变量,并用props初始化,局部变量不随着props更新而更新
- 使用watch、computed 监听和计算,转换后输出
- 赋值的时候,记得不要改变原数组