普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的。
有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性。
作用域插槽使用<template>来定义模板,可以带两个参数,分别是:
slot-scope ;模板里的变量,旧版使用scope属性
slot ;该作用域插槽的name,指定多个作用域插槽时用到,默认为default,即默认插槽
例如:
<!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"> <Child> <template slot="header" slot-scope="props"> <!--定义了名为header的作用域插槽的模板--> <h1>{{props.info.name}}-{{props.info.age}}</h1> </template> <template slot-scope="show"> <!--定义了默认作用域插槽的模板--> <p>{{show.today}}</p> </template> </Child> </div> <script> Vue.config.productionTip=false; Vue.config.devtools=false; Vue.component('Child',{ template:`<div class="container"> <header><slot name="header" :info="info"></slot></header> //header插槽 <main><slot today="礼拜一">默认内容</slot></main> //默认插槽 </div>`, data(){ return { info:{name:'ge',age:25} } } }) debugger new Vue({ el: '#app', data:{ title:'我是标题', msg:'我是内容' } }) </script> </body> </html>
以上就是Vue.javascript源码分析(二十六)高级应用作用域插槽详解。我要让妈妈直起腰来,没什么话说,一定必须考进去,什么不用说!更多关于Vue.javascript源码分析(二十六)高级应用作用域插槽详解请关注haodaima.com其它相关文章!