爬山和爱情一样,爬得越高摔得越惨,同样,爱得越深,受伤的几率越大。人的一生全靠奋斗,唯有奋斗才能成功。让我们一起来奋斗吧!相信自己,我们会谱出一段美妙的音符,来唱出我们心中的那首歌!
我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> <div> <app-layout> <h1 slot="header">{{title}}</h1> <p>{{msg}}</p> <p slot="footer"></p> </app-layout> </div> </div> <script> Vue.config.productionTip=false; Vue.config.devtools=false; Vue.component('AppLayout',{ //子组件,通过slot标签预留了三个插槽,分别为header、默认插槽和footer插槽 template:`<div class="container"> <header><slot name="header"></slot></header> <main><slot>默认内容</slot></main> <footer><slot name="footer"><h1>默认底部</h1></slot></footer> </div>` }) new Vue({ el: '#app', template:``, data:{ title:'我是标题',msg:'我是内容' } }) </script> </body> </html>
以上就是Vue.javascript源码分析(二十五)高级应用插槽详解。愿时光能缓,愿故人不散;愿你惦念的人能和你道晚安,愿你独闯的日子里不觉得孤单。更多关于Vue.javascript源码分析(二十五)高级应用插槽详解请关注haodaima.com其它相关文章!