About
使用插槽是为了能够在页面中显示向组件中传入的新的HTML
一、具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counter</title>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
</head>
<body>
<div id="app">
<counter>
<div slot="header">这里是header</div>
<div slot="footer">这里是footer</div>
</counter>
</div>
<script>
Vue.component('counter', {
template: `<div>
<slot name="header">default</slot>
<div>这里是content</div>
<slot name="footer">default</slot>
</div>`
})
var vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
效果图：
具名插槽.png
2. 具名插槽的使用
上面的demo代码的写法是vue2.6以前的写法，具名插槽的作用是我给插槽赋予一个名字，那么我在组件中就可以对确定且唯一的插槽做操作了，如果我们没有给插槽命名，那么插槽具有一个默认的slot为default，如果我们在组件中使用插槽，那么我们使用一个slot标签会将父组件中所有的插槽都使用一遍，造成不良影响。
具体用法是(2.6以前的版本)：
// 1. 在父组件中声明插槽，并给slot属性一个唯一标识符
<counter>
<div slot="header">这里是header</div> // header是该插槽的唯一标识符，也就是他的名字
<div slot="footer">这里是footer</div>
</counter>
// 2. 在子组件中使用的时候给slot标签的name属性赋予需要使用的插槽名
<slot name="header">default</slot>
2.6以后的版本中的用法是这样的：
// 在父组件中使用模板语法，使用v-slot绑定插槽的名字
<template v-slot:header>
// 在子组件中仍然使用name来作为插槽的标识符。
slot name="header">default</slot>
二、作用域插槽
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counter</title>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
</head>
<body>
<div id="app">
<counter>
<template slot-scope="props">
<p>{{props.prop.name}}, {{string}}</p>
</template>
</counter>
</div>
<script>
Vue.component('counter', {
template: `<div>
<ul>
<slot v-for="item of this.list" :prop="item"></slot>
</ul>
</div>`,
data() {
return {
list: [
{
name: 'bing',
age: 22
},
{
name: 'yan',
age: 22
},
{
name: 'ding',
age: 23
},
]
}
}
})
var vm = new Vue({
el: '#app',
data: {
string: '你好~'
}
})
</script>
</body>
</html>
效果图：
作用域插槽.png
作用域插槽的使用方法
有时候我们需要父子组件共同去渲染一个dom节点，但是父子组件访问的作用域是不同的，所以渲染时也是分开渲染的，作用域插槽可以使父子组件共同作用于一个dom节点。
2.6以前的使用方法：
// 在父组件中使用template标签， slot-scope="props"中的props是一个对象用来接收你从子组件中传递过来的数据
<template slot-scope="props">
<p>{{props.prop.name}}, {{string}}</p>
</template>
// 在子组件中使用slot插槽标签，并且绑定一个属性作为你需要传出去的数据的暴露接口
<slot v-for="item of this.list" :prop="item"></slot>
// 这里的:prop意思是prop是我传出去的数据的暴露，item是我真实需要传递的数据。
网友评论