vue 子コーポントから親コンポーネントのメソッドを実行する (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');


[参考]



引数込みで呼び出す

親コンポーネント
<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) })
},

Back