子组件定义了data,但在父组件里直接:val动态传值发现失败。
如果直接向props动态传值又出现下面的错误提示,虽然也能改变,但是比较烦人。
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
解决办法如下,APP测试通过:
第0种【推荐】:
用watch监听prpos里的值,来改变data里的内容
可以向子组件派发事件来操作,通过父组件使用@setdd="setval(2)",改变vueval来改变自定义组件值
data:{
return {
dd:1
}
},
prpos:{
setdd:{
type: String,
default: 'center'
}
},
watch: {
setdd: {
immediate: true,
handler: function(val) {
let that=this;
console.log("监听")
that.dd= val;
}
}
}
以下方法也能用,只是有些地方可能不能满足
第1种,V-BIND动态传值
子组件
<input :type="type" v-model="vals" @input="inputin" class="put" disabled/>
props: {
vals: {
type: [Number],
default: 0
}
}
父组件可以直接
v-bind:vals="item.num"
第2种,不直接更改,内部消化。
子组件
<input :type="type" v-model="val" @input="inputin" class="put" disabled/>
data(){
return{
val:1
}
},
props: {
vals: {
type: [Number],
default: 0
}
}
在生命周期里:
created() {
let that=this;
if(that.vals){
that.val=that.vals;
}
},
父组件:
<child @input="buynumin" :vals="item.num"></child>
通过间接更改val更改子组件data内的数值。
第3种:
有同学使用REFS,当然也可以,但是REFS缺点只能在初始化的时候获取,而且需要延迟,不是必须要用到内部方法,可以不考虑。
但若因为过多的派发事件导致卡顿,也可考虑REFS。