Vue任意地方调用父级方法

Posted vipbic

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue任意地方调用父级方法相关的知识,希望对你有一定的参考价值。

多数现代的 web UI 框架或库,比如 Vue、 React 和 Angular,它们利用组件来组织代码,通过传递必要的属性从父类调用组件的方法/函数是相当容易的。
这意味着您可能需要调用布局中定义的方法,或者调用来自嵌套级别的组件的父组件调用该方法

在 Vue中,可以使用像 Vuex这样的状态管理器来实现这一点,但是如果您不想要这样复杂的解决方案,也可以使用相当简单的内置 Vue 方法

设有一个名为 MyButton.vue 的组件

如下所示:

<template>
  <div>
    <button @click="$emit(\'my-event\')">Click Me!</button>
  </div>
</template>

<script>
export default {

}
</script>

您可以看到,有一个调用 $emit 的简单单击事件,$emit 是 Vue 中的一个内置方法

当然,如果您想要一个更具结构化的组件,您可以调用一个自定义方法,并在其中调用 $emit 方法,如下所示

<template>
  <div>
    <button @click="buttonClickHandler">Click Me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClickHandler() {
      this.$emit(\'my-event\')
    }
  }
}
</script>

无论如何编写这个部分,它都会发出一个事件。
当您使用这个组件时,您可以通过 v-on: 或@(这两者完全相同)来捕获这个事件,并执行任何您想要的操作。例如,如果你想在你的 index.vue 中使用这个按钮

template>
  <div>
    <MyButton @my-event="myButtonEventHandler" />
  </div>
</template>

<script>
import MyButton from "~/components/MyButton";

export default {
  components: {
    MyButton
  },
  methods: {
    myButtonEventHandler() {
      alert(\'I am here!\')
    }
  }
}
</script>

当使用 $emit 方法时,如上所示,第一个参数是事件的名称,其余参数是传递给方法的参数。所以你也可以这样做:

<template>
  <div>
    <button @click="buttonClickHandler">Click Me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClickHandler() {
      this.$emit(\'my-event\', \'Hello\', \'World\')
    }
  }
}
</script>

接受参数

<template>
  <div>
    <MyButton @my-event="myButtonEventHandler" />
  </div>
</template>

<script>
import MyButton from "~/components/MyButton";

export default {
  components: {
    MyButton
  },
  methods: {
    myButtonEventHandler(x, y) {
      alert(x + \' \' + y)
    }
  }
}
</script>

组件嵌套

现在真正的问题来了!假设您有一个非常复杂的布局,包含数十个嵌套组件。你不能只是一个接一个地把它们传到上面和上面!(我的意思是,技术上来说你可以,但是我并不希望这样做!).在这里你可以使用 $root!把 $root 想象成所有东西的根(实际上是这样的)

在触发的事件改糙一下,放在$root上

<template>
  <div>
    <button @click="buttonClickHandler">Click Me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClickHandler() {
      this.$root.$emit(\'a-far-away-event\', \'Adnan\')
    }
  }
}
</script>

如果我们要捕捉$root事件,你应该在 $root 上使用 $on 方法,原理就是把事件注册到根节点上面

<template>
  <div>
    <MyButton />
  </div>
</template>

<script>
import MyButton from "~/components/MyButton";

export default {
  components: {
    MyButton
  },
  mounted() {
    this.$root.$on(\'a-far-away-event\', this.aFarAwayEventHandler)
  },
  methods: {
    aFarAwayEventHandler() {
      alert(\'Hello \' + name)
    }
  }
}
</script>

其他方法传递

$attrs$listenersprovideinject

原文链接

Vue任意地方调用父级方法

以上是关于Vue任意地方调用父级方法的主要内容,如果未能解决你的问题,请参考以下文章

RecyclerView 内容未使用片段父级的全宽

如何在不调用事件的情况下将数据从子级发送到父级(vue 2)

Vue子组件中调用方法的最佳实践

vue子组件怎么调用父组件的方法

vue直接在父组件中调用子组件的方法

React组件间通信