2024-07-29vue-props传值

vue props 传值

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

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

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

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

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

这个警告提醒我们不要直接修改 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
      }
    }
  },