[classType vue] props/ 모달 상자 띄우기

먼저  props 란

부모 컴포넌트에서 ➡️ 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다

 

 

🔔수행하려는 동작 간단 정리

현재 slot-scope의 record를 통해 'validationDataListConfig'라는 객체가 들어오고 있고

record의 validate_result 값에 따라 모달 상자의 내용이 달라져야 하기 때문에 showModal함수의 인자로 넘겨줌.

 

script에서 showModal함수를 통해 자식컴포넌트에게 validate_result값을 넘겨주어 ErrorModal을 띄울 것임.

<template>
. . .
<span slot="validate_result" slot-scope="text, record">
 	<template v-if="record.validate_result == 'ERROR_OK'">
		<div style="color: #288c28; font-weight: bold"><a-icon type="check" class="mr-1" />OK</div>
    </template>
    <template v-else>
    	<div @click="showModal(record.validate_result)" 
        	style="cursor: help; color: red; font-weight: bold;">🚨 {{ record.validate_result }}</div>
    </template>
</span>
<ErrorModal :errorModalVisible.sync="errorModalVisible" :validateErrorMsg="message" />
. . .
</template>

 

 

<script lang="ts">
. . .
const validationDataListConfig = [
    {
        slots: { title: "ID" },
        dataIndex: "id",
        align: "center",
    },
    {
        slots: { title: "Name" },
        dataIndex: "name",
        align: "center",
    },
    {
        slots: { title: "Time" },
        dataIndex: "time",
        align: "center",
    },

    {
        title: "🛎 Start Time",
        scopedSlots: { customRender: "start_time" },
        /* eslint-disable @typescript-eslint/camelcase */
        dataIndex: "start_time",
        align: "center",
    },
    {
        /* eslint-disable @typescript-eslint/camelcase */

        title: "🛎 End Time",
        scopedSlots: { customRender: "end_time" },
        dataIndex: "end_time",
        align: "center",
    },

    {
        dataIndex: "validate_result",
        title: "📝 Validation Result",
        scopedSlots: { customRender: "validate_result" },
        align: "center",
    },
    {
        title: "✔ Uploaded",
        slots: { title: "Uploaded" },
        dataIndex: "uploaded",
        scopedSlots: { customRender: "uploaded" },
        align: "center",
    },
];


@Component({
    components: {
     	. . .
        ErrorModal: () => import("@/views/data/ErrorModal.vue"),
    },
})

export default class DataValidationPage extends Base {
    private errorModalVisible = false;
    private showModal(record: any): void {
        this.editVisible = true;
        this.message = record;
        //alert("div클릭");
    }
. . .
}


</script>

자식 컴포넌트인 ErrorModal을 import시켜주고

 

부모컴포넌트(DataValidationPage)에서 기본적으로 모달속성을 감추고 있다가 showModal함수가 작동될 때만 true로 바꿔주어 모달  visible속성을 핸들링 하고, 받았던 인자를 message에 저장한다. 

 

 

그다음 자식컴포넌트 태그의 v-bind속성(축약된 형태 사용함)을 이용해 :props이름="전달데이터"형태로 값을 넘겨준다.

<ErrorModal :errorModalVisible.sync="errorModalVisible" :validateErrorMsg="message" />

 

 

 

 

 

부모에서 자식으로 넘겨주기 끝

이제 자식 컴포넌트를 보자

 

<template>
    <a-modal title="Error description" v-model="syncVisible">
        <template v-if="validateErrorMsg == 'L0_E02'">
            <h4>{{ validateErrorMsg }}</h4>
          
        </template>
        <template v-else-if="validateErrorMsg == ('L0_E11' || 'L0_E22')">
            <h4>{{ validateErrorMsg }}</h4>
          
        </template>
        <template v-else-if="validateErrorMsg == ('L0_E5' || 'L0_E07')">
            <h4>{{ validateErrorMsg }}</h4>
       
        </template>
        <template v-else-if="validateErrorMsg == 'L2_SIGNAL_E07'">
            <h4>{{ validateErrorMsg }} Timestamp Jump</h4>
           
        </template>

        <template v-else-if="validateErrorMsg == 'L2_SIGNAL_E04'">
            <h4>{{ validateErrorMsg }} (Signal frozen)</h4>
          
        </template>
        <template v-else-if="validateErrorMsg == 'L2_SIGNAL_E08'">
            <h4>{{ validateErrorMsg }} (Signal Jump)</h4>
           
        </template>
        <template v-else>
            <h4>{{ validateErrorMsg }}</h4>
        
        </template>
    </a-modal>
</template>

 

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue } from "vue-property-decorator";
@Component
export default class TeamEdit extends Vue {
    @PropSync("errorModalVisible")
    private syncVisible!: boolean;

    @Prop() validateErrorMsg!: String;
    
    // private onClickClose(): void {
    //     this.syncVisible = false;
    // }
}
</script>
<style scoped>
p {
    margin-left: 5px;
}
</style>

부모컴포넌트로부터 받은

errorModalVisible을 syncVisible에 담아 모달의 visible속성을 핸들링한다.

그리고 부모로부터 받은 message는 @Prop()을 통해 validateErrorMsg에 담아서 사용함.

 

 

간단 요약

<부모 vue>

1.모달로 띄우고 싶은 자식vue template안에 넣어주고

   <ErrorModal :errorModalVisible.sync="errorModalVisible" :parentMessage="message" />

 

2.특정 버튼 누르면 showModal호출

<div @click="showModal(record.validate_result)" style="cursor: help; color: red; font-weight: bold">
    🚨 {{ record.validate_result }}
 </div>

 

<부모 Script>

3. 부모 스크립트에서 @Component에 자식 컴포넌트 import시켜주고

@Component({
    components: {
       . . .
        ErrorModal: () => import("@/views/data/ErrorModal.vue"),
    },
})

4. export default에 visible변수랑 showModal함수 작성

export default class DataValidationPage extends Base {
    private errorModalVisible = false;
    private showModal(record: any): void {
        this.errorModalVisible = true;
        this.message = record;
        //alert("div클릭");
    }

 

<자식 Vue>

1. syncVisible속성주고 모달 화면 구성 

<template>
    <a-modal title="Error description" v-model="syncVisible">
    <p> modal description1 </p>
    </a-modal>
</template>

 

<자식 script>

2. @PropSync, @Prop으로 부모에서 넘겨주는 데이터 받기

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue } from "vue-property-decorator";
@Component
export default class TeamEdit extends Vue {
    @PropSync("errorModalVisible")
    private syncVisible!: boolean;

    @Prop() private validateErrorMsg!: String;

    // private onClickClose(): void {
    //     this.syncVisible = false;
    // }
}