[Vue.js] 상위 구성 요소에 의해 정의된 이벤트 동적을 하위 구성 요소 내 목록 렌더링 버튼에 대응하는 예제 코드

입문

환경

OS: macOS Catalina 10.15.3
Vue: 2.6.10

결론: 결과 출력

서브어셈블리

<template>
  <div id="child">
    <h1>{{ title }}</h1>
    <!-- 親コンポーネントのbtns内のオブジェクト数に応じてbuttonの数を変更する -->
    <div v-for="btn in btns" :key="btn.id">
      <!-- $emitにて、親コンポーネントでv-onに指定する名前、第２引数には親コンポーネントに渡したい値をセット -->
      <button @click="$emit('click-button', btn.action)">{{ btn.name }}</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: {
      title: String, //型を指定しておくと予定外の型になった場合エラーが出て気付ける
      btns: Array,
    }
  }
</script>

상위 어셈블리

<template>
  <div id="parent">
    <!-- 子コンポーネントからpropsで渡した属性を親コンポーネントで指定 -->
    <Child
      title="Chile to Parent"
      :btns='btns'
      @click-button="toggleClick"
    ></Child>
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    name: 'Parent',
    components: {
      Child,
    },
    data() {
      return {
        //表示したい数だけbtnsにオブジェクトを記載
        btns: [
          {id: 1, name: 'run console.log', action: 'consoleLog'},
          {id: 2, name: 'run alert', action: 'alert'},
          {id: 3, name: 'run console.error', action: 'error'}
        ]
      }
    },
    methods: {
      //どのメソッドを発火するかを動的に変更するために定義
      toggleClick(action) {
        if (action === "consoleLog") {
          this.consoleLog() //thisをつけることで親コンポーネントで定義済のメソッドと紐づく
        } else if (action === "alert") {
          this.alert()
        } else if (action === "error") {
          this.error()
        }
      },

      //実際に発火するメソッド
      consoleLog() {
        console.log('one!')
      },
      alert() {
        alert('two!')
      },
      error() {
        console.error('three!')
      }
    }
  }
</script>

끝내다

참고로 사이트 (항상 감사합니다)