Question

我有这段代码：

     new Vue({
        el: '#app',
        components: {
            'app-component': AppComponent
        },
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            doSomething: function(){
                console.log('arrived!')
            }
        }
    })

我怎样才能打电话给＃34; doSomething＆＃34; AppComponent html模板的方法？像这样：

<app-component>  
    <a href="#" v-on:click="doSomething()">text</a>
</app-component>

我收到此错误：

未捕获的TypeError：scope.doSomething不是函数

Answer 1

尝试v-on:click="$parent.doSomething()"

Answer 2

您可以使用来自子项的$ dispatch来触发事件。例如：

// App component
<app-component>  
    <a href="#" v-on:click.prevent="$dispatch('do-something')">text</a>
</app-component>


// Parent
new Vue({
    el: '#app',
    components: {
        'app-component': AppComponent
    },
    data: {
        message: 'Hello Vue.js!'
    },
    events: {
        'do-something': function(){
            console.log('arrived!')
        }
    }
});

有关父子通信的更多信息，请查看文档： http://vuejs.org/guide/components.html#Parent-Child-Communication

Answer 3

您可以根据this answer使用此功能。

this.$parent.$options.methods.someParentMethod(data)

Answer 4

除了Wiljan响应之外，我还使用具有方法和数据的新Vue实例扩展所有组件。现在我可以访问方法等。

从vuejs中的组件模板访问父方法

4 个答案: