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

需求:

有时候我们在父组件中引入子组件,并且想通过子组件事件动态改变父组件中的值,这时我们可以通过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>

你可能感兴趣的:(vue.js)