使用一種方式混合父組件的內容與子組件自己的模板，這個過程被稱為“內容分發”。在子組件中使用特殊的<slot>元素作為內容的插槽。
Slot分發內容
概述：
簡單來說，假如父組件需要在子組件內放一些DOM，那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。
默認情況下
父組件在子組件內套的內容，是不顯示的。
例如代碼：
<div id="app">
<children>
<span>12345</span>
<!--上面這行不會顯示-->
</children>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
children: { //這個無返回值，不會繼續派發
template: "<button>為了明確作用范圍，所以使用button標簽</button>"
}
}
});
</script>
顯示內容是一個button按鈕，不包含span標簽里面的內容；
一、單個slot
在子組件模板中有slot標簽，被視為備用內容，在父組件不提供內容的情況下使用。如果父組件提供內容，則把整個內容片段插入到slot所在的DOM位置，并替換掉slot標簽本身。
子組件模板中沒有slot標簽，父組件提供的內容會被拋棄
如果替換的內容較多，可以直接用一個template替換。
<div id="app">
<h3>自定義組件</h3>
<custom>
<!-- 當卸載自定義標簽之前的內容，要混合子組件中的模板 -->
<div>我是父組件提供的內容，我的存在會替換子組件中slot標簽內的內容</div>
</custom>
</div>
<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:`
<div>
<slot>
<div>我備用內容，如果子組件中有內容會替換我哦~</div>
</slot>
</div>
`
})
new Vue({
el:"#app"
})
</script>
見證奇跡的時候到了，頁面上會顯示如下內容
單個slot.png
二、有具體名稱的slot
<slot>元素可以用一個特殊的屬性name來配置如何分發內容。
<div id="app">
<h3>自定義組件</h3>
<custom>
<!-- <div slot="one">我替換one</div> -->
<div slot="three">我替換three</div>
<div slot="two">我替換two</div>
<span slot="two">我替換two</span>
<div slot="one">我替換one</div>
</custom>
</div>
<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:`
<div>
<slot name="one">
<p>我是one</p>
</slot>
<slot name="two">
<p>我是two</p>
</slot>
<slot name="three">
<p>我是three</p>
</slot>
</div>
`
})
new Vue({
el:"#app"
})
</script>
你猜頁面上會顯示什么？猜對了我就告訴你-。-
具名slot.png
是不是被順序驚到了，這是因為頁面會根據子組件中slot的順序去替換內容并渲染頁面。
可以使用一個匿名的slot，處理那些沒有對應slot的內容
<div id="app">
<h3>自定義組件</h3>
<custom>
<!-- <div slot="one">我替換one</div> -->
<div slot="three">我替換three</div>
<div slot="two">我替換two</div>
<span slot="two">我替換two</span>
<div slot="one">我替換one</div>
<div>替換無名的slot</div>
<div>替換無名的slot</div>
<div>替換無名的slot</div>
</custom>
</div>
<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:`
<div>
<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>
</div>
`
})
new Vue({
el:"#app"
})
</script>
匿名的slot就會被那些沒有對應slot的內容替換。
匿名slot.png
三、編譯作用域
父組件模板的內容在父組件作用域內編譯
子組件模板的內容在子組件作用域內編譯
<div id="app">
<h3>自定義組件</h3>
<custom>
<!-- 渲染的數據，是父組件中的數據，如果想使用子組件中的數據，就在子組件中建立自己的數據 -->
{{message}}
</custom>
</div>
<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:`
<div>
<p>我是{{message}}</p>
<slot>
// 這的內容會被父組件中內容替換
<p> {{message}}</p>
</slot>
</div>
`
})
new Vue({
el:"#app",
data:{
message:"我是父組件的數據"
}
})
</script>
頁面渲染
編譯作用域.png
運用了slot分發，使我們對組件的應用更加靈活。
單向數據流
數據從父組件傳遞給子組件，只能單項綁定。
在子組件內不應該修改父組件傳遞過來的數據。
改變prop的情況：
1.作為data中局部數據的初始值使用
2.作為子組件中computed屬性
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、默認參數是10
Vue.component('custom-cmpontent',{
data(){
return {
incrementCount:this.count //作為局部組件的data的初始值
}
},
props:{
count:{
type:Number, // 類型
default:10, // 默認值
required:true //必須要傳參數
}
},
computed:{
incrementCount2(){
return this.incrementCount
}
},
template:`
<div>
<h3>我是一個自定義組件</h3>
<input type='button' value="改變count的值" @click="changeCount">
{{incrementCount}}
</div>
`,
methods:{
changeCount:function(value){
this.incrementCount++;
this.$emit('receive')
}
}
})
new Vue({
el:"#app",
data:{
count:0
},
methods:{
countH:function(){
this.count++;
}
}
})
那如果我們給子組件傳值得時候，傳過去的是一個字符串，就會報錯
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
