programing

VueJs: 다른 구성 요소 내의 구성 요소 사용

prostudy 2022. 4. 29. 23:12
반응형

VueJs: 다른 구성 요소 내의 구성 요소 사용

나는 미리 정의된 속성으로 다른 내부에 있는 주성분을 활용하려고 한다.

내가 이루고자 하는 것은 여기 있지만, 결과적으로는 빈 칸을 얻고 있을 뿐이다.

<template>
    <call-dialog-link
        :id="id"
        :url=url"
        message="Are you sure you wish to remove this record?"
        label="Remove"
        css-classes="alert"
    ></call-dialog-link>
</template>
<script>
    import CallDialogLink from './CallDialogLink.vue';
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            }
        },
        components: {
            'call-dialog-link': CallDialogLink
        }
    };
</script>

여기 있다.CallDialogLink구성 요소

<template>
    <span class="clickAble" :class="cssClasses" v-text="label" @click="clicked()"></span>
</template>
<script>
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            },
            message: {
                type: String,
                required: true
            },
            label: {
                type: String,
                required: true
            },
            cssClasses: {
                type: String,
                required: false
            }
        },
        mounted() {
            window.EventHandler.listen('remove-dialog-' + this.id + '-called', (data) => {
                window.location.reload(true);
            });
        },
        methods: {
            clicked() {
                window.EventHandler.fire('top-confirm', {
                    id: 'remove-dialog-' + this.id,
                    message: this.message,
                    url: this.url
                });
            }
        }
    };
</script>

내가 뭘 잘못하고 있는지 알기나 해?

네 코드에 오타가 있는 것 같아.

<template>
    <call-dialog-link
        :id="id"
        :url="url" // didn't open the double quote here
        message="Are you sure you wish to remove this record?"
        label="Remove"
        css-classes="alert"
    ></call-dialog-link>
</template>

참조URL: https://stackoverflow.com/questions/42270204/vuejs-using-component-inside-another-component

반응형