vue中子组件更改父组件数据

2023-12-16 12:54| 来源: 网络整理| 查看: 265

因为vue是单项数据流，所以没办法直接在子组件中去修改父组件里面的数据，vue提倡单项数据流，为了防止项目过于复杂时，导致数据流难以理解。引用Vue的官网的话：父系 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父及组件的状态，从而导致你的应用的数据流向难以理解。所以在项目开发过程中，我们总是通过子组件触发父组件中方法的方式，通过父组件的方法，更改父组件的数据。

一、props传递方法

通过props的方式，将父组件的方法传递到子组件，在子组件中通过props接收，可以在当前组件的实例上直接触发父组件的方法，从而实现子组件更改父组件的值。同事也可以将子组件的数据，以参数的形式发送给父组件。

由于代码不多，就暂且全部展示，仅需关心相关事件就可以

//父组件,设置更改自己数据的方法，将该方法传递给子组件我是父组件 import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, methods:{ changeMsg(text,num){ console.log(text,num); this.msg=this.msg+1 } }, data(){ return{ msg:1 } } } //子组件，接收父组件传递过来的方法，通过props接收到的方法和数据，在组件实例上可以直接获取和触发我是子组件点我更改父组件数据父组件数据：{{msg}} export default { name: 'HelloWorld', props: { msg: Number, changeMsg:Function }, data(){ return{ text:"我是子组件数据，我要发送给父组件", num:12 } }, methods:{ changeFatherData(){ this.changeMsg(this.text,this.num) } }, } 二、通过this.$emit触发父组件方法实现

在父组件中自定义一个方法，然后传递给子组件，子组件通过this.$emit直接触发父组件中的数据，实现父子组件通信。子组件触发事件，父组件监听事件。

//父组件，将定义的方法传递给子元素我是父组件 import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, methods:{ changeMsg(text,num){ console.log(text,num); this.msg=this.msg+1 } }, data(){ return{ msg:1 } } } //子组件，通过this.$emit触发父组件方法，更改父组件数据，同时可以进行数据传值我是子组件点我更改父组件数据父组件数据：{{msg}} export default { name: 'HelloWorld', props: { msg: Number, }, data(){ return{ text:"我是子组件数据，我要发送给父组件", num:12 } }, methods:{ changeFatherData(){ this.$emit('changeMsg',this.text,this.num) } }, } 三、子组件通过this.$parent直接触发父组件

子组件直接触发父组件事件，无需进行方法的传递、接收，以及事件的定义。

//父组件，声明需要的方法我是父组件 import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, methods:{ changeMsg(text,num){ console.log(text,num); this.msg=this.msg+1 } }, data(){ return{ msg:1 } } } //子组件，this.$parent直接触发父组件方法我是子组件点我更改父组件数据父组件数据：{{msg}} export default { name: 'HelloWorld', props: { msg: Number, }, data(){ return{ text:"我是子组件数据，我要发送给父组件", num:12 } }, methods:{ changeFatherData(){ this.$parent.changeMsg(this.text,this.num) } }, }

不足之处：维护性差，组件复用时在子组件使用可能存在无法确定触发方法所在的父级所在层数，可能出现在A模块里面需要this.$parent，在B组件中需要this.$paren.$parent的情况。

四、通过provide / inject 实现组件的传参

常用于组件层次嵌套过深的情况，传参以及方法的传递触发，需要层层传递的情况。

作用：在父组件通过provide传递属性，可以在任意子组件中通过inject获取得到

祖先组件：

我是父组件,我的num是{{ num }}。更改num的值 import son from './son.vue' export default { components:{ son }, data(){ return{ num:0 } }, provide(){ return { num:()=>this.num, changnum:this.changnum } }, methods:{ changnum(){ this.num++ } } }

父组件：

我是平平无奇的子组件，有了provide / inject我好轻松 import sun from "./sun.vue" export default { components:{ sun } }

子组件：

我是孙组件,我获取到的父组件的父组件的num为{{ num() }},更改父组件的父组件的值 export default { inject:['num','changnum'], };

需要注意的是：

传递响应式的数据，需要传递一个方法过去，去触发方法，建立关联。不然得到的是初始data里面的值，不是响应式的。

inject可以设置默认值，跟props类似

provide / inject需要搭配使用，当父组件没有传递，子组件接收也会报错。

五、小陈简介

哈，好久没更新了，离职状态在认真学习，卑微码农，很高兴你可以看我整理的东西，一起进步，如果对文章有疑问可以评论哈，或者有问题也可以交流。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章