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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue,有多种方式可以让组件修改组件传递的值。 一种方式是通过在组件使用`$emit`方法,触发一个自定义事件,并且将修改后的值作为参数传递给组件。比如,在组件定义一个`change`方法,然后通过`this.$emit('update:value', newValue)`来触发名为`update:value`的事件,将新的值`newValue`传递给组件。这样组件就可以通过监听`update:value`事件来获取组件修改后的值。 另一种方式是使用`.sync`修饰符。在组件通过`v-bind`指令将组件的值绑定到组件属性,并且使用`.sync`修饰符将组件对该属性修改同步到组件。比如,在组件将`value`属性传递给组件时,我们可以使用`<child-component :value.sync="value"></child-component>`来实现双向绑定。这样组件就可以直接修改`value`属性,并且组件会同步更新。 还有一种方式是使用`v-model`指令。在组件通过`v-model`指令将组件的值绑定到组件属性,并且在组件使用`$emit`方法触发名为`input`的事件来更新该属性。比如,在组件使用`<child-component v-model="value"></child-component>`来实现双向绑定。这样组件修改`value`属性时,会自动触发`input`事件,从而更新组件的值。 综上所述,Vue组件可以通过使用`$emit`方法、`.sync`修饰符或`v-model`指令来修改组件传递的值。这些方式都可以实现组件组件之间的双向数据绑定。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

herry-弟弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值