如何将对象处理程序传递给 vue 组件

Posted 2023-02-23

【中文标题】如何将对象处理程序传递给 vue 组件

【英文标题】：How to pass object handler into vue component

【发布时间】：2021-06-29 03:59:30

【问题描述】：

我想在 props 传递的处理程序中缓存状态。

问题是，模板渲染和文本内容变化很好，但控制台总是抛出错误：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'apply'”

代码如下：

<template>
  <picker-box :options="item.options" @change="handlePickerChange($event, item)">
    <text> item.options[getPickerValue(item)].text </text>
  </picker-box>
</template>

<script>
  export default 
    props: 
      item: 
        type: Object,
        default() 
          return 
            options: [ text: 'op1' ,  text: 'op2' ],
            handler: 
              current: 0,
              get() 
                return this.current
              ,
              set(value) 
                this.current = value
              ,
            ,
            /* I also tried this: */
            // new (function () 
            //   this.current = 0
            //   this.get = () => 
            //     return this.current
            //   
            //   this.set = (value) => 
            //     this.current = value
            //   
            // )(),
          
        ,
      ,
    ,
    methods: 
      handlePickerChange(value, item) 
        item.handler.set(value)
      ,
      getPickerValue(item) 
        return item.handler.get()
      ,
    ,
  
</script>

我知道使用data() 或model prop 很容易，但我希望像handler.current 那样使用，换句话说，我只想知道为什么这个处理程序对象不正确（语法层），怎么能我修好了。

【参考方案1】：

你到底想通过什么状态？ 如果您需要跟踪静态属性，您可以使用客户端的本地存储，或为此使用观察者。 如果您需要保留更多动态数据，可以将其传递给计算属性，该属性会在每次更改时跟踪并设置它们。