将 “this” 作为参数传递 vuejs 2

Passing "this" as a parameter vuejs 2

提问人:Marek Wrobel 提问时间:8/9/2023 最后编辑:Marek Wrobel 更新时间:8/12/2023 访问量:43

问:

我试图将 vuejs 对象(对象 A)作为参数传递(进入对象 B),以便我可以访问所有方法和变量,而无需将它们作为参数单独传递。

所以它看起来像这样:

<!-- In Object A -->
<ObjectB :pass_obj="this"/>

对象 B 的定义:

<template>
...
</template>

<script>
...

props: {
    pass_obj: {
      type: Object,
      default () {
        return {
        }
      }
    }
  },
<script>

通过在对象 B 中这样做,我可以访问对象 A 的方法。

<!-- in Object B -->
this.pass_obj.foo();

它帮助我更模块化地构建代码,并且对象 B 可以与已实现的每个类的对应方法进行交互。

问题是我在浏览器控制台中收到以下警告:

[Vue 警告]:属性或方法“__v_isRef”未在实例上定义,但在渲染过程中被引用。通过初始化此属性,确保此属性在 data 选项中是反应式的,或者对于基于类的组件而言。请参见:https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

我理解这是因为“这个”没有在对象 A 中定义。但即使我在那里定义它(这可能是一个可怕的做法):data() { return {...} }

data() { 
return {
this: this
...
} 
}

我仍然收到警告。

如何避免收到此警告。也许我应该重新考虑这种方法。提前感谢您的帮助。

javascript vuejs2 这个 警告

评论

0赞 yoduh 8/10/2023
在我看来,你绝对应该重新考虑这种方法。子组件不应直接访问父方法,因为它将它们紧密耦合在一起。如果希望子项向父级发出运行方法的信号,则子项应发出事件。然后,父母会监听事件并做出相应的反应,不同的父母可能会做出不同的反应。然后,子项和父项是完全独立的,这就是真正的模块化编程,
0赞 Keyboard Corporation 8/10/2023
无需在数据中定义,只需定义 B 的值,然后通过 <ObjectB @passOBJ=“passOBJ($event)”/> 接收 A 的值this.$emit("passOBJ, {object:data}")
0赞 Waqas Ahmed 8/10/2023
Vue 是单向绑定。这意味着数据是单向流动的,为了更新我们通常使用的父组件的数据或 vuex。this.$emit('event-name', {})
0赞 Marek Wrobel 8/10/2023
感谢您的评论。我将仔细研究这些事件。

答:

0赞 Rohìt Jíndal 8/12/2023 #1

若要从子组件访问父组件实例,可以使用$parent属性。这可能很诱人,可以作为使用道具传递数据的懒惰替代方案。

例如,如果要从子组件访问父组件方法,请使用 .foo()this.$parent.foo()