插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。
例如
<body>
<div id="app">
<child-component>你好</child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>Hello,World!
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
输出内容还是在组件中的内容,在 child-component内写的内容没起作用。
<body>
<div id="app">
<child-component>你好</child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>Hello,World!
<slot></slot>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
我们现在给组件增加一个插槽
我们在内写的"你好"起作用了!!!
**
二,具名插槽
**
具名插槽,就是给插槽起名字
一个不带 name 的 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:例如:
其他形式
<body>
<div id="app">
<child-component>
<template slot="header">
漂亮、美丽、购物、逛街
</template>
<template slot="footer">
帅气、才实
</template>
<div>
我是人,
我是默认的插槽
</div>
</child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>
<h4>这个世界不仅有男人和女人</h4><br>
<slot name="header"></slot><br>
<slot></slot><br>
<slot name="footer"></slot><br>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
三,作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的。就是在组件上的属性,可以在组件元素内使用
<body>
<div id="app">
<slot_demo v-slot:default="{user}">
{{user.firstName}}
</slot_demo>
</div>
<script>
Vue.component('slot_demo',{
data: function() {
return {
user : {
firstName: "Liu",
lastName: "Tao"
}
}
},
//首先要在子组件中<slot> 元素上动态绑定一个你要在外面访问的 对象属性
template : `
<span>
<span>子组件:</span>
<slot :user="user">{{ user.lastName }}</slot>
</span>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
总结:如果父组件 <slot_demo v-slot:default="{user}">
{{user.firstName}}
</slot_demo>
结果:Liu
如果父组件<slot_demo v-slot:default="{user}">
</slot_demo>
结果:Tao
如果子组件没有绑定user对象,那么上面代码中的user就是取的这里面的默认值。例:
<body>
<div id="app">
<slot_demo v-slot:default="{user={firstName:'hussddd'}}">
{{user.firstName}}
</slot_demo>
</div>
<script>
Vue.component('slot_demo', {
data: function () {
return {
user: {
firstName: "Liu",
lastName: "Tao"
}
}
},
template: `
<span>
<span>子组件:</span>
<slot ></slot>
</span>
`
})
let vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
下面是脚手架里作用域插槽的基本用法
父组件是demo.vue
子组件是User.vue
demo.vue
<template>
<div class="demo">
<!-- 子组件 -->
<user v-slot:default="slotProps">
{{slotProps.user.firstName}}
</user>
</div>
</template>
<script>
import User from "../components/User.vue"
export default {
name:"app",
components:{User}
}
</script>
User.vue
<template>
<div>
<span>子组件:</span>
<!-- 作用域插槽 -->
<slot :user="user">
<!-- 后备内容 -->
{{user.lastName}}
</slot>
</div>
</template>
<script>
export default {
data() {
return {
user:{
firstName:"张",
lastName:"三"
}
}
},
}
</script>