定義：定義子組件的時候，在子組件內部刨了一個坑，父組件想辦法往坑里填內容头岔；
1.單個插槽
1.1定義插槽：在子組件作用域中寥院，使用 <slot></slot> 定義一個插槽劲赠；
1.2.使用插槽：在父作用域中使用帶有插槽的組件時，組件內容區(qū)域中的內容秸谢，會插入到插槽中顯示凛澎；
父組件給子組件的插槽內填內容
<body>
<div id="app">
<!-- 這是父組件的作用域 -->
<my-com1>
<!-- 這是父組件第一次在插槽天的內容 -->
12345
</my-com1>
<hr>
<my-com1>
<!-- 這是父組件第二次在插槽天的內容 -->
復方草珊瑚
</my-com1>
<hr>
<my-com1>
<!-- 這是父組件第三次在插槽天的內容 -->
<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>
打印結果
2.具名插槽
2.1.如果在一個組件中,定義了多個slot插槽,則必須為每個插槽起一個name名稱
2.2.如果要往插槽里面填充內容,但是沒有提供具體的插槽名稱,此時,內容會默認填充到沒有name屬性的slot中,如果slot不帶name屬性,則把它稱為默認插槽
<div id="app">
<!-- 注意：如果要往插槽里面填充內容估蹄，但是沒有提供具體的插槽名稱预厌，此時，內容會默認 填充到 沒有 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標簽的時候,提供了一些插槽的數據,將來哪些內容放到slot標簽插槽中,則那些內容就可以使用<slot>為你提供的數據
2.插槽通過屬性節(jié)點,把一些數據返回給父作用域,父作用域就可以通過slot-scope來接收,把接收的數據再進行使用
<body>
<div id="app">
<!-- 注意：作用域插槽，就是 子組件在定義 slot 插槽的時候甥角，提供了一些 插槽的數據网严； -->
<!-- 將來，哪些內容 要放到 <slot> 標簽內嗤无，則震束，那些內容，就可以使用 <slot> 為你提供的數據 -->
<my-com1>
<!-- scope 代表作用域的意思 -->
<h3 slot-scope="scope">數據 --- {{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: {}
});
