用组件调用父方法

JavaScript

乐米亚

2020-03-11

我有一个组件,想要添加一个单击侦听器,该侦听器在Vue的父模板中运行一个方法。这可能吗?

<template>
    <custom-element @click="someMethod"></custom-element>
</template>

<script>
    export default {
        name: 'template',
        methods: {
            someMethod: function() {
                console.log(true);
        }
    }
</script>

第758篇《用组件调用父方法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
Sam神奇A 2020.03.11

您可以使用$root 类似这样的,但是,如果你使用nuxt与VUE @daxigu响应将无法工作,因为$root是nuxt它的自我。我能做什么?这个:

this.$root.$children[1].myRootMethod()
  • $ root:正如我之前所说,这是nuxt。

  • $children[0]: is nuxtloading.

  • $children1: is your main component, in my case, it was a base layout with a few global components and a global mixin.

Hope it helps.

阿飞A飞云 2020.03.11

您可以通过将父方法传递给子组件,props也可以使子组件发出自定义或本机事件。

这里有一个Plunker来演示这两种方法。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android