Vue.js emitを利用して子コンポーネントから親コンポーネントのメソッドを実行する

Vue.js emitを利用して子コンポーネントから親コンポーネントのメソッドを実行する

vue.jsのemitの使い方と簡単なサンプルコード。デザインにはbootstrapを使用してます。

環境

  • OS  CentOS 8.0.1905 (Core)
  • node v12.13.1
  • npm 6.13.2
  • @vue/cli 4.1.1

※CentOS8にVue.jsの環境構築はこちら

フォルダ構成

サンプルコードのフォルダ構成です。

bootstrap-vueインストール

下記のコマンドでインストールしておきます

main.jsを下記の通り編集します。

emitサンプルコード

src/components配下に子コンポーネントとして、Count.vueを下記のコードで作成します。

次に親コンポーネントとなるsrc配下のApp.vueを作成します。

起動します

ブラウザから http://プライベートIP:8080 にアクセスすると、親コンポーネントで定義した @countup=”up” により、子コンポーネントのthis.$emit(“countup”); により実行されます