定義：定義子組件的時候，在子組件內(nèi)部刨了一個坑，父組件想辦法往坑里填內(nèi)容；
1.單個插槽
1.1定義插槽：在子組件作用域中，使用 <slot></slot> 定義一個插槽；
1.2.使用插槽：在父作用域中使用帶有插槽的組件時，組件內(nèi)容區(qū)域中的內(nèi)容，會插入到插槽中顯示；
父組件給子組件的插槽內(nèi)填內(nèi)容
<body>
<div id="app">
<!-- 這是父組件的作用域 -->
<my-com1>
<!-- 這是父組件第一次在插槽天的內(nèi)容 -->
12345
</my-com1>
<hr>
<my-com1>
<!-- 這是父組件第二次在插槽天的內(nèi)容 -->
復方草珊瑚
</my-com1>
<hr>
<my-com1>
<!-- 這是父組件第三次在插槽天的內(nèi)容 -->
<h3>汗滴禾下土</h3>
<h3>汗滴禾下土</h3>
</my-com1>
</div>
<script>
Vue.component('my-com1', {
template: `<div>
鋤禾日當午
<slot></slot>
</div>`
})
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
打印結(jié)果
2.具名插槽
2.1.如果在一個組件中,定義了多個slot插槽,則必須為每個插槽起一個name名稱
2.2.如果要往插槽里面填充內(nèi)容,但是沒有提供具體的插槽名稱,此時,內(nèi)容會默認填充到?jīng)]有name屬性的slot中,如果slot不帶name屬性,則把它稱為默認插槽
<div id="app">
<!-- 注意：如果要往插槽里面填充內(nèi)容，但是沒有提供具體的插槽名稱，此時，內(nèi)容會默認 填充到 沒有 name 屬性的 slot 中 -->
<my-com1>
<div slot="cc2">
<p>12345</p>
<p>12345</p>
</div>
<h4>汗滴禾下土</h4>
</my-com1>
</div>
<script>
// 注意;如果 在 一個組件中，定義了多個 slot 插槽，則，必須為每個插槽 起一個 name 名稱
Vue.component('my-com1', {
template: `<div>
鋤禾日當午
<!--第一個插槽-->
<!--規(guī)定：如果 slot 不帶 name 屬性，則 把它稱為 默認插槽-->
<slot></slot>
<p>~~~~~~~~~~</p>
<!--第二個插槽-->
<slot name="cc2"></slot>
</div>`
})od
// 創(chuàng)建 Vue 實例，得到 ViewMel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
3.作用域插槽
3.1.作用域插槽,就是子組件在定義slot標簽的時候,提供了一些插槽的數(shù)據(jù),將來哪些內(nèi)容放到slot標簽插槽中,則那些內(nèi)容就可以使用<slot>為你提供的數(shù)據(jù)
2.插槽通過屬性節(jié)點,把一些數(shù)據(jù)返回給父作用域,父作用域就可以通過slot-scope來接收,把接收的數(shù)據(jù)再進行使用
<body>
<div id="app">
<!-- 注意：作用域插槽，就是 子組件在定義 slot 插槽的時候，提供了一些 插槽的數(shù)據(jù)； -->
<!-- 將來，哪些內(nèi)容 要放到 <slot> 標簽內(nèi)，則，那些內(nèi)容，就可以使用 <slot> 為你提供的數(shù)據(jù) -->
<my-com1>
<!-- scope 代表作用域的意思 -->
<h3 slot-scope="scope">數(shù)據(jù) --- {{scope}} -- {{scope.sinfo.name}}</h3>
</my-com1>
</div>
<script>
Vue.component('my-com1', {
template: `<div>
<p>*** 作用域插槽的演示</p>
<slot msg="this is a msg" :sinfo="info"></slot>
</div>`,
data() {
return {
info: {
name: 'zs',
age: 22,
address: '北京'
}
}
}
})
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
