Vue.js中插槽的使用
vue中插槽的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<comp1>这是插槽内容</comp1>
</div>
<script>
var comp1 = {
data() {
return {
msg: 'hello'
}
},
template: `<h1>子组件<br><slot></slot></h1>`//slot就是挖一个空然后在后面填充
}
var app = new Vue({
el: '#app',
components: {
comp1
}
})
</script>
</body>
</html>
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。
<script>
var comp1 = {
data() {
return {
msg: 'hello'
}
},
template: `<h1>子组件<br><slot>这是后备内容</slot></h1>`//slot就是挖一个空然后在后面填充
}
var app = new Vue({
el: '#app',
components: {
comp1
}
})
</script>
当 组件里的内容为空时,就会渲染后备内容
<div id="app">
<comp1></comp1>
</div>
具名插槽
在slot中指定 name="footer"指定插槽的名字,
然后再模板中指定对应的 这是具名插槽的底部 v-slot:footer,footer就是填充到插槽的具体位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<comp1>
<template v-slot:footer>这是具名插槽的底部</template>
<template v-slot:header>这是具名插槽的顶部</template>
</comp1>
</div>
<script>
var comp1 = {
template: `<h1><header><slot name='header'></slot></header>
<footer><slot name='footer'></slot></footer></h1>`
}
var app = new Vue({
el: '#app',
components: {
comp1
}
})
</script>
</body>
</html>
作用域插槽
为了让父组件可以访问子组件的数据,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<comp1>
<template v-slot:header="header">这是具名插槽的顶部{{header}}</template>
<template v-slot:footer="header">这是具名插槽的底部</template>
</comp1>
</div>
<script>
var comp1 = {
data() {
return {
msg: '这是comp1作用域的数据'
}
},
template: `<h1><header><slot name='header' v-bind:header="msg"></slot></header>
<footer><slot name='footer'></slot></footer></h1>`
}
var app = new Vue({
el: '#app',
components: {
comp1
}
})
</script>
</body>
</html>