关于vue.js:Vue任意地方调用父级方法

35次阅读

共计 2073 个字符，预计需要花费 6 分钟才能阅读完成。

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

在 Vue 中，能够应用像 Vuex 这样的状态管理器来实现这一点，然而如果您不想要这样简单的解决方案，也能够应用相当简略的内置 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、$listeners、provide、inject

原文链接

Vue 任意中央调用父级办法

正文完