使用組件調用父方法

我有一個組件，並且希望添加一個在Vue的父模板中運行方法的單擊偵聽器。這可能嗎？使用組件調用父方法

In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events...

所以，你需要的時候有事，然後可以用來調用一個方法來從你的子組件發出click事件：

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

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

來源

2017-09-14 user2036108

在你發佈的代碼中，'someMethod'將在'custom-element'被點擊時運行。這是你想要的還是有其他一些場景？ – Bert

[Vue.js繼承調用父方法]的可能重複（https://stackoverflow.com/questions/36764151/vue-js-inheritance-call-parent-method） – thanksd

從Vue公司的文件（ https://vuejs.org/v2/guide/components.html#Composing-Components）

直接在你的父母模板中。

如果你不想（使用this.$emit('click')從子組件）明確地發出從孩子的事件，你也可以嘗試使用本地click事件，@click.native="someMethod"（文檔：https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components）

來源

2017-09-14 00:34:23

你可以通過props將父方法傳遞給子組件，或者您可以讓子組件發出自定義事件或本地事件。

這裏有一個Plunker來演示這兩種方法。

來源

2017-09-14 01:01:53 miqid

是的！

可以從孩子調用父方法，這很容易。每個Vue組件定義屬性$parent。從此屬性中，您可以調用父級中存在的任何方法。

這裏是一個的jsfiddle，做它：https://jsfiddle.net/50qt9ce3/1/

<script src="https://unpkg.com/vue"></script> 

<template id="child-template"> 
    <span @click="someMethod">Click me!</span> 
</template> 

<div id="app"> 
    <child></child> 
</div> 

<script> 
Vue.component('child', { 
    template: '#child-template', 
    methods: { 
    someMethod(){ 
     this.$parent.someMethod(); 
    } 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    methods: { 
    someMethod(){ 
     alert('parent'); 
    } 
    } 
}); 
</script>

注意：雖然它不建議做這樣的事情，當你正在構建斷開連接的可重用組件，有時候我們正在建立相關的不可重複使用組件，在這種情況下，它非常方便。

來源

2017-09-14 03:48:13 Gudradain

使用組件調用父方法

回答

相關問題