Vue 슬롯특수 특성 slot,slot-scope 및 명령 v-slot 설명
10282 단어 Vueslotslot-scopev-slot
2.구명 슬롯:slot 이름 짓 기
3.slot,slot-scope 는 vue 2.6.0 의 v-slot 를 사용 하 는 것 을 추천 합 니 다.그래도 여 기 는 신 구 방법 에 대해 서 사용 설명 을 해 드 리 겠 습 니 다.
슬롯 슬롯(이름 없 음)
<body>
<div id="app">
<Test>
<div>slot </div>
</Test>
</div>
<template id="test">
<div>
<slot></slot>//
<h3> test </h3>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app",
})
</script>
slot 서명 슬롯 사용
구성 요소 에서 slot 를 사용 하여 자 리 를 차지 할 때 slot 탭 에서 name 속성 을 사용 하여 slot 슬롯 에 이름 을 정의 합 니 다.바로 구명 슬롯 입 니 다.html 에서 구명 슬롯 을 사용 할 때 slot 로 도입
<body>
<div id="app">
<Test>
<div slot="header"> </div>//
<div slot="footer"> </div>
</Test>
</div>
<template id="test">
<div>
<slot name="header"></slot>//
<h3> Test </h3>
<slot name="footer"></slot>
</div>
</template>
</body>
<script>
Vue.component(
'Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
v-slot 사용
v-slot 가 구성 요소 에서 slot 를 사용 하여 자 리 를 차지 할 때 도 slot 탭 에서 name 속성 을 사용 하여 slot 슬롯 에 이름 을 정의 합 니 다.하지만 html 에서 사용 할 때 는 조금 다르다.template 템 플 릿 탭,template 탭 에서 v-slot 명령 으로 슬롯 이름 을 연결 하고 탭 에 추가 할 내용 을 기록 해 야 합 니 다.
<body>
<div id="app">
<Test>
<template v-slot:header>//v-slot
<h2>slot </h2>
</template>
<p> </p>
<template v-slot:footer>
<h2>slot </h2>
</template>
</Test>
</div>
<template id ='test'>
<div class="container">
<header>
<!-- -->
<slot name = "header"></slot>//
</header>
<section>
</section>
<footer>
<!-- -->
<slot name = 'footer'></slot>
</footer>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
역할 영역 슬롯:
slot-scope 사용:
a.:구성 요소 템 플 릿 에 필요 한 slot 슬롯 을 쓰 고 현재 구성 요소 의 데 이 터 를 v-bind 를 통 해 slot 태그 에 연결 합 니 다.
b.:구성 요 소 를 사용 할 때 slot-scope="gain"을 통 해 구성 요소 에 있 는 slot 태그 에 연 결 된 데 이 터 를 받 습 니 다.
c.:gain.xxx 를 통 해 바 인 딩 데 이 터 를 사용 할 수 있 습 니 다.
<body>
<div id="app">
<Test>
<div slot="default" slot-scope="gain">// （slot-scope）
{{ gain.msg }}
</div>
</Test>
</div>
<template id="test">
<div>
<slot name="default" :msg="msg"> </slot>
<p> test </p>
</div>
</template>
</body>
<script>
new Vue({
el:"#app",
components:{
'Test':{
template:"#test",
data(){
return {
msg:" "
}
},
}
}
})
</script>
역할 영역 슬롯:v-slot 의 용법
<body>
<div id="app">
<Test>
<template v-slot:header="gain">//v-slot
<div>
<h3>slot</h3>
<p> {{gain.msg}} </p>
</div>
</template>
</Test>
</div>
<template id="test">
<div>
<slot name="header":msg="msg"></slot>
<p> test </p>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test",
data(){
return {
msg:' '
}
}
});
new Vue({
}).$mount("#app")
</script>
Vue 2.6.0 에서 v-slot 명령 을 사용 하여 특수 한 특성 인 slot 와 slot-scope 를 대체 하 였 으 나 상기 사례 를 통 해 알 수 있 듯 이 v-slot 를 사용 할 때 template 태그 에 있어 야 한 다 는 점 을 주의해 야 합 니 다.
보충 지식:vue 에서 v-slot 명령 은 Vue 슬롯 및 slot,slot-scope 와 의 용법 차이 점 을 어떻게 적용 합 니까?
익명 슬롯
하위 구성 요소:
<template>
<div>
<!-- -->
<slot></slot>
<h3> </h3>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
<template>
<div id="inforCategory-warp">
<!-- -->
<lxsolt> </lxsolt>
</div>
</template>
<script>
import lxsolt from './lx'
export default {
name: 'inforCategory',
components: {
lxsolt,
},
data(){
return{}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>slot-scope 사용(slot-scope 는 하위 구성 요소 의 데 이 터 를 연결 합 니 다):
구성 요소 템 플 릿 에 필요 한 slot 슬롯 을 쓰 고 현재 구성 요소 의 데 이 터 를 v-bind 를 통 해 slot 탭 에 연결 합 니 다.
구성 요 소 를 사용 할 때 slot-scope="scope"를 통 해 구성 요소 에 있 는 slot 태그 에 연 결 된 데 이 터 를 받 습 니 다.
scope.xxx 를 통 해 바 인 딩 데 이 터 를 사용 할 수 있 습 니 다.
서명 슬롯 및 역할 영역 슬롯
하위 구성 요소:
<template>
<div>
<slot name="header" :msg="name"></slot>
<h3> </h3>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
data() {
return {
name:' '
}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
<template>
<div id="inforCategory-warp">
<!-- -->
<nameSlot>
<div slot="header" slot-scope="scope"> slot-scope<span style="color:red">{{scope.msg}}</span> </div>
<div slot="footer"> </div>
</nameSlot>
</div>
</template>
<script>
import nameSlot from './nameSlot'
export default {
name: 'inforCategory',
components: {
nameSlot,
},
data(){
return{
msg:' ',
msg2:'v-slot'
}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>하위 구성 요소:
<template>
<div>
<div class="container">
<header>
<!-- -->
<slot name="header"></slot>
</header>
<section>
v-slot
</section>
<footer>
<!-- -->
<slot name="footer" :msg="msg"></slot>
</footer>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg:'vsolt '
}
},
created() {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
<template>
<div id="inforCategory-warp">
<vsolt>
<template v-slot:header>
<h2>slot </h2>
</template>
<p> </p>
<template v-slot:footer="scope">
<h2>slot <span style="color:red">{{scope.msg}}</span></h2>
</template>
</vsolt>
</div>
</template>
<script>
import vsolt from './v-slot'
export default {
name: 'inforCategory',
components: {
vsolt,
},
data(){
return{
msg:' ',
msg2:'v-slot'
}
}
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
