zoukankan      html  css  js  c++  java
  • Vue将props值实时传递 并可修改

    我们都知道props值是只读的,子组件内不可直接修改,会报错滴

    但是很多时候这个值是需要子组件主动修改的,一般我们会使用this.$emit()去修改,但比较麻烦

    下面这种方式可以实现:

    1、父组件实时修改props值时,子组件可以接收到改变

    2、子组件可主动修改该值

    <div>{{RealValue}}</div>
      props: [ "value" ],
      watch: {
        value (v) {
          this.RealValue = v
        }
      },
      data () {
        return {
          RealValue: this.value
        }
      }

    原理很简单,就是使用一个RealValue作为实际显示的参数,并且使用watch实时把value值传给他

    PS:这里的值是字符串格式,如果value是对象或者数组,watch处要写成:

      watch: {
        value:{
           deep: true,
           handler(v) {
              this.RealValue = v
           }
        }
      },    
  • 相关阅读:
    【BZOJ4444】国旗计划
    NOIp模拟赛三十一
    [arc086e]snuke line
    NOIp模拟赛三十
    [agc004f]namori
    [agc004d]salvage robot
    [agc016b]colorful hats
    NOIp模拟赛二十九
    [arc082f]sandglass
    Oracle性能报告--ASH
  • 原文地址:https://www.cnblogs.com/mankii/p/12603994.html
Copyright © 2011-2022 走看看