vue props 传值

https://blog.csdn.net/MtangEr/article/details/135084222

Vue 官方文档中对于 Prop 的定义：

Prop 是你可以在组件上注册的一些自定义属性。当一个值传递给一个 props
属性的时候，它就变成了那个组件实例的一个属性。为了给子组件传递数据，我们需要在该组件上使用 v-bind 指令绑定需要传递的数据。

由此可见，Prop 是一种传递数据的机制，父组件通过 Prop 向子组件传递数据，子组件通过 Props 接收父组件传递过来的数据，这些数据被封装成一个个解构体形式的对象，不能直接进行修改。这样做的好处是保证了单向数据流，即只有父组件能够更新 Prop，然后数据会自动流向子组件，从而避免了数据的混乱与不可预测性。

如果我们在子组件中直接修改了父级传递 prop1 的值，那么运行时就会发生警告和错误。控制台会有如下提示

img

这个警告提醒我们不要直接修改 Prop 的值，因为这样会导致数据的不稳定性和意外行为。Vue 提倡数据的单向流动，所有的数据更新都应该由父组件驱动，所以子组件不能直接修改父组件传递过来的 Prop 值。

那么我们应该怎么做呢？有几个可以解决这个问题的方法：

  • 使用事件触发机制

  • 使用计算属性

方法一:使用事件触发机制

watch: {
  value(value) { //value 即为props 传值
    this.innerValue =  value
  }
},


  <a-tree-select
  v-model="innerValue"
  @change="handleChange"
/>

  handleChange(values) {
    this.$emit('input', values)
  },

方法二:使用计算属性

computed: {
    innerValue:
      {
        get() {
          console.log(this.value+'进入啊')
          return this.value
        }, set(value) {
          console.log(value)
          this.$emit('input', value)
        }
      }
  },

方法三:后记

data() {
    return {
      //此处写法一定情况下可以实现,
      // 如果子组件先初始化, 父组件再传值, 就会发生值读取不到,
      // 也就是这里的读取是一次性读取,运行到了直接执行,如果执行时没有值,那么父级的传值就丢了
      // innerValue: this.value,
    }
  },
  
此种读取value方式也要配合 方法一的时间触发方式,将值写回父级组件

后记

  • watch的问题
//子组件初始化时, 获取监听的props属性,
watch: {
    qparam: {
      immediate: true,//当 watch 一个变量的时候，初始化时并不会执行你需要在created的时候手动调用一次。添加immediate属性，这样初始化的时候也会触发
      handler() {
        this.queryParam = this.qparam
      }
    }
  },