vue 父组件、子组件对象改变_vue中如何让子组件修改父组件数据

一、关于vue中watch的认识

我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候

•1、常见的使用场景

...

watch:{

value(val) {

console.log(val);

this.visible = val;

}

}

...

•2、如果要一开始就执行

...

watch: {

firstName: {

handler(newName, oldName) {

this.fullName = newName + '-' + this.lastName;

},

immediate: true,

}

}

...

•3、深度监听(数组、对象)

...

watch: {

obj: {

handler(newName, oldName) {

console.log('///')

},

immediate: true,

deep: true,

}

...

二、关于子组件修改父组件属性认识

在vue2.0+ 后不再是双向绑定,如果要进行双向绑定需要特殊处理。

[Vue warn]: 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: "你修改的属性名"

•1、通过事件发送给父组件来修改

**在子组件test1中**

添加

{{item}}

...

methods: {

add() {

// 直接把数据发送给父组件

this.$emit('update', this.book);

this.book = '';

},

},

**在父组件中**

...

addBook(val) {

this.books = new Array(val)

},

•2、使用.sync 来让子组件修改父组件的值(其实是上面方法的精简版)

**在父组件中,直接在需要传递的属性后面加上.sync**

**在子组件中**

{{word}}

export default {

props: {

word: {

type: String,

default: '',

},

},

data() {

return {

str: '',

}

},

watch: {

str(newVal, oldVal) {

// 在监听你使用update事件来更新word,而在父组件不需要调用该函数

this.$emit('update:word', newVal);

}

}

}

•3、在子组件中拷贝一份副本

**子组件中**

export default {

props: {

// 已经选中的

checkModalGroup: {

type: Array,

default: [],

required: false,

}

},

data() {

return{

copyCheckModalGroup: this.checkModalGroup, // 选中的

}

},

methods: {

// 一个一个的选择

checkAllGroupChange(data) {

// 把当前的发送给父组件

this.$emit('updata', data);

},

},

watch: {

checkModalGroup(newVal, oldVal) {

this.copyCheckModalGroup = newVal;

}

}

}

**父组件中直接更新传递给子组件的数据就可以**

...

// 更新子组件数据

roleCheckUpdata(data) {

this.roleGroup = data;

},

...

总结

以上所述是小编给大家介绍的vue中如何让子组件修改父组件数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

本文标题: vue中如何让子组件修改父组件数据

本文地址: http://www.cppcns.com/ruanjian/java/230223.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值