vue 父子组件传值 子组件修改父组件值的解决办法
最近在前端项目中遇到了父子组件传值的问题...vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样会防止子组件意外改变父组件的值,从而数据流变的难以理解;另外,每次父组件的数据发生更新时,子组件的都会刷新到最新的数据,但不能改变子组件内部改变prop,这样浏览器就会发出警告解决办法来啦解决办法一、子组件想要修改时,需要通过$emit派发一个自定义事件,父...
最近在前端项目中遇到了父子组件传值的问题...
vue中父组件向子组件传值时,其父子prop之间形成单向下行绑定,反过来则不行,这样会防止子组件意外改变父组件的值,从而数据流变的难以理解;另外,每次父组件的数据发生更新时,子组件的都会刷新到最新的数据,但不能改变子组件内部改变prop,这样浏览器就会发出警告
解决办法来啦
解决办法一、子组件想要修改时,需要通过$emit派发一个自定义事件,父组件收到后,由父组件进行修改
子组件在computed中,
computed:{
currentActiveNames: {
get() {
return this.activeNames //父组件传给子组件的值
},
set(val) {
// 改变由父组件控制
this.$emit('on-change-activeNames', val)
}
}
}
这样子组件告诉父组件自己修改了父组件传过来的值
接下来呢,父组件中在引用子组件的地方添加@on-change-activeNames="changeActiveNames",另外,在methods方法中定义changeActiveNames用来接收父组件传过来的值
methods:{
changeActiveNames(val){
console.log(‘子组件传过来的值’,val)
}
}
解决办法二、
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
大概意思就是:只要prop是对象或者数组,在子组件里面就可以修改从而改变父组件的值
那具体要怎么写呢...
1. 父组件中引入子组件 <child :par-obj="parObj"><child/> child为子组件的名称(这里提一下 子组件名若为驼峰式,父组件引用的时候用‘-’连接 例如子组件名称为 childCom 引用时则用child-com)
2. parObj为传给子组件的对象,在data中定义 重点来啦....在data中可以这样定义
parObj:{
parVal: 1
},
这样palVal才是你需要真正传给子组件的值
3. 在子组件中
props: {
parObj: {
type: Object,
default: null
}
},
拿到parObj后,子组件就可以肆意的改变parObj对象中的parVal啦
更多推荐
所有评论(0)