vue子组件修改父组件中的属性

最新推荐文章于 2024-07-23 10:46:58 发布

herry-弟弟

最新推荐文章于 2024-07-23 10:46:58 发布

阅读量2.2k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43123560/article/details/123641687

版权

本文介绍了在Vue中如何利用provide和inject组合来实现父组件向子组件传递方法，进而动态更新父组件的数据。在父组件中定义一个方法并提供，子组件通过inject注入该方法，然后在子组件的mounted阶段调用此方法，从而达到父组件值的改变。

摘要由CSDN通过智能技术生成

需求：

有时候我们在父组件中引入子组件，并且想通过子组件事件动态改变父组件中的值，这时我们可以通过provide和inject组合来实现

//在父页面定义一个方法，并设置形参，然后通过 provide 将其暴露出去。
  export default {
    provide(){
      return{
        updateFunc:this.updateFunc
      }
    },
    data() {
      return {
      	newContent:''
      }
    },
    methods: {
      updateFunc(res){
       //res是你传过来的值
       this.newContent=res    //您的处理逻辑
      }
    }
  }
</script>

//在子页面通过 inject 引入父页面暴露的方法，然后在子页面像调用子页面自己的方法那样调用就可以了
<script>
 
  export default {
    inject:['updateFunc'],
    data() {
      return { 
      };
    },
    mounted:function () {
      this.updateFunc('即将修改的值');
    },
    methods: {
 
    }
  }
</script>