Memo
vue 子コーポントから親コンポーネントのメソッドを実行する (emit)
Home
›
Memo
›
子コーポントから親コンポーネントのメソッドを実行する (emit)
本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
親コンポーネント
<password @cancel="cancel"></password>
export default {
components: {
'password' : Password
},
methods: {
// passwordのコンポーネントから呼ばれるメソッド
cancel: function() {
console.warn(“password cancel”)
},
...
子コンポーネント
クリック時に呼び出す
<button v-on:click="$emit('cancel')">キャンセル</button>
scriptから呼び出す
this.$emit('cancel');
[参考]
https://blog2.cct-inc.co.jp/blog/vue-js/vue_emit-props/
引数込みで呼び出す
親コンポーネント
<pager @changePage="changeContentsPage($event)"></pager>
<script>
changeContentsPage: function(event) {
this.currentContentsPage = Number(event.page)
this.getContents()
},
</script>
子コンポーネント
movePage: function(page) {
this.$emit("changePage", { page: Number(page) })
},
関連ページ
Nuxt 共通関数 (inject)
#vue
2020-12-21 18:44:54
バインディング
#vue
2020-09-04 12:05:17
Nuxt Production modeで起動
#vue
2020-08-21 11:01:33
classを動的に付け替える
#vue
2020-09-09 17:34:21
改行を含むテキストの表示
#vue
2020-10-19 22:33:14
Back