1. ホーム
  2. javascript

[解決済み] コンポーネントで親メソッドを呼び出す

2023-06-25 14:54:01

質問

コンポーネントを持っていて、Vueの親テンプレートのメソッドを実行するクリックリスナーを追加したいです。これは可能でしょうか?

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

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

どのように解決するのですか?

Vue.jsから直接 ドキュメント :

Vueでは、親子コンポーネントの関係は、propsダウン、イベントアップとまとめることができます。親はpropsで子へデータを渡し、子はeventで親へメッセージを送ります...。

つまり click イベントを発生させ、それを使って親テンプレートのメソッドを呼び出すことができます。

もし、子コンポーネントから明示的にイベントを出したくない場合は ( this.$emit('click') を子コンポーネントから利用する) 場合は、子コンポーネントに対して ネイティブクリックイベント , @click.native="someMethod" .