从同一文件中的自定义对象属性访问vue.js“方法”

wmomyfyw 于 2023-02-13 发布在 Vue.js

关注(0)|答案(1)|浏览(143)

我有一个名为“ meta”的自定义属性，它有一些值。我想引用一个回调函数，指向放置在“methods”对象中的某个方法。
有没有什么方法可以让它成为vue示例的一部分，让我可以访问“数据、方法、计算”等等？
下面是代码的一部分：

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Articles',

  meta: {
    topmenu: [
      {
        label: 'Create new',
        handler: () => {
          this.onCreateNew() // <-- unable to call this method
        }
      }
    ]
  },

  methods: {
    onCreateNew () { // <-- unaccessible from meta.topmenu[0].handler
      console.log('creating new item')
    }
  }
})
</script>

vue.js

来源：https://stackoverflow.com/questions/75424878/access-a-vue-js-methods-from-a-custom-object-property-within-the-same-file

1条答案

按热度按时间

wj8zmpe11#

- 备选案文A）**

1.不要在vue示例中使用箭头函数
1.使用bind（）* 子函数 *

label: 'Create new',
    handler: function() {
        this.onCreateNew();
    }.bind(this);

参考：Vuejs - watch nested object in 'this' not self

- OPTION B）（hacky）在javascript中，你可以使用关键字var**来声明全局变量，不管作用域是什么。因此，你可以在mounted（）钩子中 * globalize * vue示例，如下所示：

...
    mounted() {
       var self = this;
    },
    methods: {...}
    ...

然后在任何其他位置使用self：

...
    handler: () => {
      self.onCreateNew() // use "self" instead
    } 
    ...

您还可以访问数据、方法、计算等。就像使用关键字this一样，但使用self。
但是，您必须为每个想要此行为的vue组件执行 * var self = this *，并且由于它们是全局变量，因此它们应该具有不同的名称，否则它们可能会冲突并导致不必要的效果。selfFoo、selfBar、fooSelf、这篇文章、selfArticle等）
希望这能帮上忙

赞(0）回复(0）举报 2023-02-13

我来回答

从同一文件中的自定义对象属性访问vue.js“方法”

1条答案

相关问题

热门标签

最新问答