Vue で親子メソッドを呼び出す方法について説明します。

Vue は非常に一般的に使用される JavaScript フレームワークであり、コンポーネントベースの方法でユーザー インターフェイスを構築しますが、このプロセスではコンポーネント間の通信が非常に重要です。 Vue では、親コンポーネントと子コンポーネント間の通信は、props とイベントを通じて実現できます。この記事では、Vue で親子メソッド呼び出しが行われる方法について説明します。

Vue では、親コンポーネントと子コンポーネント間の通信は、props とイベントを通じて実現できます。 Props は属性であり、親コンポーネントから子コンポーネントにデータを渡すメソッドです。イベントはイベントであり、子コンポーネントから親コンポーネントにメッセージを送信する方法です。

以下では、例を使用して、Vue で親子メソッドを呼び出す方法を示します。まず、「child.vue」という名前の新しいサブコンポーネントを作成します。

<template>
  <div>
    <button @click="onClickButton">点击调用父组件方法</button>
  </div>
</template>

<script>
  export default {
    methods: {
      onClickButton() {
      this.$emit('callParentFunc')
      }
    }
  }
</script>

サブコンポーネントで、ボタンを定義し、クリック イベントをバインドします。ボタンがクリックされると、this.$emit を通じてイベント callParentFunc をトリガーし、空のパラメーターを渡します。このようにして、子コンポーネントはメッセージを送信し、親コンポーネントはこのイベントをリッスンして子コンポーネントのメソッドを呼び出すことができます。

次に、親コンポーネントでこのイベントを受け取り、子コンポーネントのメソッドを呼び出します。親コンポーネントでは、テンプレート内の子コンポーネントを使用し、その callParentFunc イベントをリッスンし、onChildClick メソッドをバインドします。

<template>
  <div>
    <h2>我是父组件</h2>
    <Child @callParentFunc="onChildClick"/>
  </div>
</template>

<script>
  import Child from './child.vue'
  export default {
    components:{Child},
    methods: {
      onChildClick() {
        console.log("调用子组件方法")
      }
    }
  }
</script>

ご覧のとおり、テンプレート内の子コンポーネントを使用し、それをリッスンします。 . 子コンポーネントの callParentFunc イベント。同時に、メソッド内に onChildClick メソッドが定義されており、子コンポーネントが親コンポーネントにメッセージを送信するときにこのメソッドを実行できます。

概要: この記事の導入により、Vue で親子メソッドが呼び出される方法、つまり、子コンポーネントが this.$emit を通じてイベントをトリガーし、メッセージを送信する方法を理解しました。親コンポーネントがこれをリッスンしている間、外部にイベントが発生した後、子コンポーネントのメソッドを呼び出すことができます。この方法は、Vue の親コンポーネントと子コンポーネントの間で通信するための非常にシンプルで実用的な方法です。

以上がVue で親子メソッドを呼び出す方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。