我热爱春天，因为春天充满了生机，充满了新的希望！
普通的插槽里面的数据是在父组件里定义的，而作用域插槽里的数据是在子组件定义的。
有时候作用域插槽很有用，比如使用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其它相关文章！
