Vue2.0에서 슬롯 배포 콘텐츠를 구현하는 방법
- 亚连원래의
- 2018-06-21 14:16:431292검색
이 글에서는 주로 Vue2.0 슬롯 배포 콘텐츠와 소품 검증 방법을 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라 살펴보겠습니다
상위 컴포넌트의 컨텐츠와 하위 컴포넌트의 자체 템플릿을 혼합하는 방법을 사용하는 것을 "컨텐츠 배포"라고 합니다. 하위 구성요소의 특수 a4365f6a4ea7c03ad11b3f19396405b1 요소를 콘텐츠 슬롯으로 사용하세요.
슬롯 배포 콘텐츠
개요:
간단히 말하면 상위 구성 요소가 하위 구성 요소에 일부 DOM을 넣어야 하는 경우 해당 DOM을 표시할지 여부, 표시할 위치 및 표시 방법 슬롯 배포 책임 작업입니다.
기본적으로
하위 구성 요소 내의 상위 구성 요소 내용은 표시되지 않습니다.
예제 코드:
<p id="app">
<children>
<span>12345</span>
<!--上面这行不会显示-->
</children>
</p>
<script>
var vm = new Vue({
el: '#app',
components: {
children: { //这个无返回值，不会继续派发
template: "<button>为了明确作用范围，所以使用button标签</button>"
}
}
});
</script>표시된 콘텐츠는 버튼 버튼이며, 이는 스팬 태그의 콘텐츠를 포함하지 않습니다.
1. 단일 슬롯
하위 구성 요소 템플릿에 슬롯 태그가 있습니다. 백업 콘텐츠로 간주되어 해당 구성 요소에서 콘텐츠를 제공하지 않는 경우에 사용됩니다. 상위 구성 요소가 콘텐츠를 제공하는 경우 전체 콘텐츠 조각이 슬롯의 DOM 위치에 삽입되고 슬롯 태그 자체가 교체됩니다.
하위 컴포넌트 템플릿에는 슬롯 태그가 없으며, 상위 컴포넌트에서 제공하는 콘텐츠는 폐기됩니다.
교체할 콘텐츠가 많은 경우 템플릿으로 직접 대체할 수 있습니다.
<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- 当卸载自定义标签之前的内容，要混合子组件中的模板 -->
<p>我是父组件提供的内容，我的存在会替换子组件中slot标签内的内容</p>
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
template:`
<p>
<slot>
<p>我备用内容，如果子组件中有内容会替换我哦~</p>
</slot>
</p>
`
})
new Vue({
el:"#app"
})
</script>기적을 목격할 시간이 왔습니다. 다음 콘텐츠가 페이지에 표시됩니다
Single Slot.png
2. 특정 이름의 슬롯
58cb293b8600657fad49ec2c8d37b472 특수 속성 이름으로 지정해야 합니다. 콘텐츠 배포 방법을 구성합니다.
<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- <p slot="one">我替换one</p> -->
<p slot="three">我替换three</p>
<p slot="two">我替换two</p>
<span slot="two">我替换two</span>
<p slot="one">我替换one</p>
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
template:`
<p>
<slot name="one">
<p>我是one</p>
</slot>
<slot name="two">
<p>我是two</p>
</slot>
<slot name="three">
<p>我是three</p>
</slot>
</p>
`
})
new Vue({
el:"#app"
})
</script>페이지에 무엇이 표시될지 맞춰보세요? 추측이 맞다면 말씀드리겠습니다 -. -
Named Slot.png
서브 구성 요소의 슬롯 순서에 따라 페이지가 콘텐츠를 교체하고 페이지를 렌더링하기 때문입니다.
익명 슬롯을 이용하면 해당 슬롯이 없는 콘텐츠를 처리할 수 있습니다
<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- <p slot="one">我替换one</p> -->
<p slot="three">我替换three</p>
<p slot="two">我替换two</p>
<span slot="two">我替换two</span>
<p slot="one">我替换one</p>
<p>替换无名的slot</p>
<p>替换无名的slot</p>
<p>替换无名的slot</p>
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
template:`
<p>
<slot name="one">
<p>我是one</p>
</slot>
<slot name="two">
<p>我是two</p>
</slot>
<slot name="three">
<p>我是three</p>
</slot>
<slot>
<p>我是无名的slot</p>
</slot>
</p>
`
})
new Vue({
el:"#app"
})
</script>익명 슬롯은 해당 슬롯이 없는 콘텐츠로 대체됩니다.
익명 Slot.png
3. 컴파일 범위
상위 구성 요소 템플릿의 내용은 상위 구성 요소 범위에서 컴파일됩니다
하위 구성 요소 템플릿의 내용은 하위 구성 요소 범위에서 컴파일됩니다
<p id="app">
<h2>自定义组件</h2>
<custom>
<!-- 渲染的数据，是父组件中的数据，如果想使用子组件中的数据，就在子组件中建立自己的数据 -->
{{message}}
</custom>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
Vue.component('custom',{
data(){
return {
message:"我是子组件的数据"
}
},
template:`
<p>
<p>我是{{message}}</p>
<slot>
// 这的内容会被父组件中内容替换
<p> {{message}}</p>
</slot>
</p>
`
})
new Vue({
el:"#app",
data:{
message:"我是父组件的数据"
}
})
</script>페이지 렌더링
컴파일 범위.png
은 슬롯 배포를 사용하여 구성 요소 애플리케이션을 더욱 유연하게 만듭니다.
단방향 데이터 흐름
데이터는 상위 구성 요소에서 하위 구성 요소로 전달되며 한 가지 방식으로만 바인딩될 수 있습니다.
상위 구성 요소에서 전달한 데이터는 하위 구성 요소에서 수정하면 안 됩니다.
props 변경:
1. 데이터에서 로컬 데이터의 초기 값으로 사용합니다.
2. 하위 구성 요소에서 계산된 속성으로 사용합니다.
props 확인
상위 구성 요소가 값을 전달할 때 불필요한 오류를 방지하기 위해 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 더 정확하도록 prop 값의 유형을 설정할 수 있습니다
props:{
propA:Number, 数值类型
propB:[String,Number], 多种类型
propC:{type:String,required:true}, 必填项
propD:{type:Number,default:100}, 默认是
propE:{typr:Number,default:function(){return 1000}}
propF:{validator:function(value){return value>2}} 符合value>2的值
}이해가 안 가네요. 다음을 보세요. 상위 구성 요소가 하위 구성 요소
1에 값을 전달해야 하는 경우 이 매개 변수는
2를 전달해야 합니다. 값은 숫자 유형
3이어야 합니다. 하위 구성 요소에 값을 전달하고 문자열이 전달되면 오류가 보고됩니다
위 내용은 모든 사람을 위해 정리한 내용이므로 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
WeChat 미니 프로그램에서 요청 작업을 수행하기 위해 요청 네트워크를 사용하는 방법WeChat 미니 프로그램에서 ajax를 사용하여 서버 데이터를 요청하는 방법JavaScript에는 어떤 특별한 데이터 유형이 있나요?위 내용은 Vue2.0에서 슬롯 배포 콘텐츠를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!