반응형
컴포넌트 슬롯 내에서 계산된 속성을 사용할 수 있습니까?
최근에 컴포넌트 슬롯 내에서 계산 속성이나 데이터 속성을 사용할 수 없다는 것을 알게 되었습니다.컴포넌트에 computed가 정의되어 있는데 컴포넌트의 슬롯에서 사용할 수 없습니다.그것을 작동시킬 수 있는 방법이 있나요?
코드 예:
Vue.component('test-component', {
template: '<div><slot></slot></div>',
computed: {
my_computed: function(){
return 2+3; // not defined in slot
}
}
})
<div id="app">
<test-component>
<span v-text="my_computed"></span>
</test-component>
</div>
라이브 예시를 참조해 주세요.https://jsfiddle.net/gu9jh4n0/1/
그러기 위해서는 범위 지정 슬롯을 사용할 수 있습니다.
이 예에서 컴포넌트는 다음과 같습니다.
Vue.component('test-component', {
template: '<div><slot :computed="my_computed"></slot></div>',
computed: {
my_computed: function(){
return 2+3; // not defined in slot
}
}
});
메인 템플릿은 슬롯의 스코프를 취득해, 계산한 것을 사용합니다.
<test-component>
<span slot-scope="data" v-text="data.computed"></span>
</test-component>
언급URL : https://stackoverflow.com/questions/48460022/can-i-use-computed-properties-within-components-slot
반응형
'source' 카테고리의 다른 글
런타임에 Maven 아티팩트 버전 가져오기 (0) | 2022.09.01 |
---|---|
서로 다른 메시지를 두 파일에 기록하기 위한 로그백 (0) | 2022.09.01 |
Eclipse의 Java 프로젝트:java.lang 타입.개체를 확인할 수 없습니다.필요한 .class 파일에서 간접적으로 참조됩니다. (0) | 2022.09.01 |
Vuex 상태가 잘못된 값을 반환함 (0) | 2022.09.01 |
Vue JS의 v-for 루프 내에서 변수 설정 (0) | 2022.08.31 |