【Vue】컴퍼넌트의 버튼을 부모로부터 지정한다

다이얼로그등을 포함한 컴퍼넌트를 작성했을 때에 기동 버튼은 호출 페이지마다 다른 것을 지정하고 싶은 장면이 있다고 생각합니다. 그럴 때 Vuetify의 v-slot:activator처럼 호출자로 버튼을 지정 가능한 컴포넌트를 작성합니다.

컴포넌트 트리거를 외출

Vuetify의 v-slot:activator와 같이 컴포넌트를 기동하는 버튼을 외부에서 지정 가능한 컴포넌트를 작성합니다.

FormDialog.vue

<template>
  <v-dialog v-model="dialog" persistent max-width="600px">
    <template v-slot:activator="{ on }">
      <!-- slotで呼び出し元から起動ボタンを指定可能にする -->
      <slot
        name="activator"
        :on="{ click: open }"
      ></slot>
    </template>
    <v-card>
      <v-card-title>
        <span class="headline">入力フォーム</span>
      </v-card-title>
      <v-card-text>
        <form>
          <v-textarea
            v-model="text"
            label="フォーム"
            :counter="1000"
          ></v-textarea>
        </form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" text @click.native="dialog = false">
          キャンセル
        </v-btn>
        <v-btn color="blue darken-1" text @click.native="save()">
          更新
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      // ダイアログ制御用変数
      dialog: false,

      // 入力用変数
      text: ''
    }
  },
  methods: {
    // 何もせずにただダイアログを開く
    open() {
      // ダイアログをオープン
      this.dialog = true
    }
  }
}
</script>

slot에서 이벤트를 상위 구성 요소에 전달합니다. 여기에서는 다음과 같이 onClick에서 컴포넌트 내의 open() 메소드를 호출하도록 설정하고 있습니다.

<slot
  name="activator"
  :on="{ click: open }"
></slot>

호출자의 구성 요소는 다음과 같습니다.

index.vue(호출자)

<template>
  <v-row align="center" justify="center">
    <v-col cols="12">
      <h1>ボタン配置ページ</h1>
    </v-col>
    <v-col cols="12">
      <!-- コンポーネントの呼び出し -->
      <FormDialog>
        <!-- v-slotでボタンを親から指定する -->
        <template v-slot:activator="{ on }">
          <v-btn v-on="on">
            Dialog
          </v-btn>
        </template>
      </FormDialog>
    </v-col>
  </v-row>
</template>

<script>
export default {
  components: {
    FormDialog: () => import('@/components/FormDialog')
  }
}
</script>

아래에서 호출자의 버튼에 FormDialog에서 지정한 이벤트가 등록됩니다.

<template v-slot:activator="{ on }">
  <v-btn v-on="on">
    Dialog
  </v-btn>
</template>

다른 핸들러 추가

호출원마다 버튼을 눌렀을 때의 동작이 다른 경우는 이벤트 핸들러를 별명으로 건네줄 수도 있습니다.

FormDialog.vue 부분 발췌

<slot
 name="activator"
 :on="{ click: open }"
 :onFillin="{ click: openWithFillin }" <!-- 別のメソッドを登録 -->
></slot>

<中略>

  methods: {
    // 何もせずにただダイアログを開く
    open() {
      // ダイアログをオープン
      this.dialog = true
    },

    // デフォルト値をフィルインしてダイアログを開く
    openWithFillin() {
      // 値をフィルイン
      this.text = 'デフォルト値'
      // ダイアログをオープン
      this.dialog = true
    }
  }
}
</script>

호출자는 다음과 같이 onFillin을 사용한다.

index.vue(호출자 부분 발췌)

<FormDialog>
  <template v-slot:activator="{ onFillin }">
    <v-btn v-on="onFillin">
      Dialog
    </v-btn>
  </template>
</FormDialog>

Vuetify의 v-slot : activator와 함께 사용

예를 들면 다이얼로그의 버튼에 호버했을 때는 버튼의 설명을 내고, 클릭했을 때는 다이얼로그를 열도록 하고 싶은 경우는, v-tooltip등과 병용합니다.

이런 경우


이 경우, 컴퍼넌트의 핸들러를 병합합니다.

index.vue(호출자 부분 발췌)

<FormDialog>
  <template v-slot:activator="{ onFillin }">
    <v-tooltip top>
      <template v-slot:activator="{ on }">
        <!-- v-tooltipのonとFormDialogのonFillinをマージ -->
        <v-btn icon v-on="Object.assign(on, onFillin)">
          <v-icon>mdi-information</v-icon>
        </v-btn>
      </template>
      <span>
        ボタンの説明
      </span>
    </v-tooltip>
  </template>
</FormDialog>

참고

Vue.js 범위가 있는 슬롯
Vuetify의 v-slot : activator 사용법