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>