반응형
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
반응형
'programing' 카테고리의 다른 글
Vuex가 구성 요소를 업데이트하지 않음 (0) | 2022.04.29 |
---|---|
탐색복제 현재 위치("/검색")로 이동할 수 없음 (0) | 2022.04.29 |
필터링/검색 문제 후 입력 변경 - VueJs (0) | 2022.04.29 |
서명되지 않은 문자란? (0) | 2022.04.29 |
Vuetify의 팹 버튼 아이콘이 수직으로 중앙에 위치하지 않음 (0) | 2022.04.29 |