首先我们创建子父组件
父组件传值msgVal给子组件
子父组件传值(子组件改变prop值)
{{msg}}
import vChild from './vChild.vue'
export default {
components:{
vChild
},
data(){
return{
msg:'这是父组件哦'
}
}
}
2.在子组件中:(我们尝试用changeProps直接改变msgVal值)
子组件
props:{{msgVal}}
Start
export default {
props:['msgVal'],
data(){
return{
}
},
methods:{
changeProps(){
this.msgVal = '改变了props'
}
}
}
控制台报错
简单来说就是 他希望避免直接改变该属性 最好用计算属性值或者基于属性值的数据来去修改他
所以~我们可以这样:
plan1:“` data中声明mag1 在 mounted函数中初始化赋值 后续操作直接用mag1来代替
msgVal
props:['msgVal'],
data(){
return{
mag1:''
}
},
methods:{
changeProps(){
console.log('111111')
this.mag1 = '改变了props'
}
},
mounted(){
this.mag1 = this.msgVal
},
computed:{
msg2(){
return this.msgVal
}
},
}
PlanB:用计算属性来获取值 msg2即为props传参数的值 后续直接用它~