定义：定义子组件的时候，在子组件内部刨了一个坑，父组件想办法往坑里填内容；
1.单个插槽
1.1定义插槽：在子组件作用域中，使用 <slot></slot> 定义一个插槽；
1.2.使用插槽：在父作用域中使用带有插槽的组件时，组件内容区域中的内容，会插入到插槽中显示；
父组件给子组件的插槽内填内容
<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>`
})
// 创建 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>
锄禾日当午
<!--第一个插槽-->
<!--规定：如果 slot 不带 name 属性，则 把它称为 默认插槽-->
<slot></slot>
<p>~~~~~~~~~~</p>
<!--第二个插槽-->
<slot name="cc2"></slot>
</div>`
})od
// 创建 Vue 实例，得到 ViewMel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
3.作用域插槽
3.1.作用域插槽,就是子组件在定义slot标签的时候,提供了一些插槽的数据,将来哪些内容放到slot标签插槽中,则那些内容就可以使用<slot>为你提供的数据
2.插槽通过属性节点,把一些数据返回给父作用域,父作用域就可以通过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: '北京'
}
}
}
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>](https://img.haomeiwen.com/i13336975/829ce5dad1004a05.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
网友评论