Vue コンポーネント間でメソッドを呼び出す方法

Vue は、Web アプリケーションの開発時に広く使用されている人気のある JavaScript フレームワークです。データ バインディング、コンポーネント化、ルーティングなどの多くの便利な機能を提供し、強力なツールとなります。 Vue のコンポーネントはコードの再利用可能な部分です。この記事では、Vue コンポーネント間でメソッドを呼び出す方法について説明します。

Vue では、コンポーネントに子コンポーネントを含めることができ、子コンポーネントは親コンポーネントと通信して対話できます。たとえば、親コンポーネントを定義し、その中に複数のサブコンポーネントを含めることができ、これらのサブコンポーネントは相互にメソッドを呼び出すことができるため、より複雑な機能を実装できます。簡単な例を次に示します。

// 定义一个子组件
Vue.component('child-component', {
  template: '<div><button @click="onClick">点击我</button></div>',
  methods: {
    onClick: function() {
      this.$emit('child-clicked')
    }
  }
})

// 定义一个父组件
new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    onChildClicked: function() {
      this.message = '子组件被点击了'
    }
  }
})

この例では、ボタンがクリックされたときに自動的に起動するボタンを含む子コンポーネント child-component を定義します。 ## メソッドを実行し、イベントを送信します。 onClick メソッドでは、$emit を使用して child-clicked イベントを送信します。次に、親コンポーネントで、このイベントを処理する onChildClicked メソッドを定義します。 onChildClicked メソッドでは、文字列を message プロパティに割り当てるだけです。 これで、子コンポーネントを親コンポーネントに含めて、リスナーを設定できます。このリスナーは、

child-clicked

イベントをリッスンします。イベントがトリガーされると、onChildClicked は メソッドでは、ここでは message の値を変更するだけですが、実際にはここでより複雑なロジックを実行できます。 <pre class="brush:php;toolbar:false">&lt;div id=&quot;app&quot;&gt;   &lt;child-component @child-clicked=&quot;onChildClicked&quot;&gt;&lt;/child-component&gt;   &lt;p&gt;{{ message }}&lt;/p&gt; &lt;/div&gt;</pre>ここでは、親コンポーネントのテンプレートで子コンポーネントを使用し、

child-clicked

イベントをリッスンして onChildClicked メソッドを実行するリスナーを追加します。 。 要約すると、Vue コンポーネントはコードを再利用可能な部分に分割し、各コンポーネントをより適切に制御できるため、非常に便利なツールです。

$emit

および # リスナーは、親コンポーネントと子コンポーネントの間で簡単にデータを渡したり、イベントをトリガーしたりできるため、コンポーネント間でメソッドを呼び出すときに非常に便利です。

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