html
父页面
<div id="app"> <register> <span slot="name">{{message.name}}</span> <span slot="sex">{{message.sex}}</span> <span slot="age">{{message.age}}</span> </register> </div>
子组件
<template id="tmp"> <div> <div>姓名 : <slot name="name"></slot></div> <div>性别 : <slot name="sex"></slot></div> <div>年龄 : <slot name="age"></slot></div> </div> </template>
js
var model = { template:`#tmp` } // 全局 写法 // Vue.component('register',model) var vm = new Vue({ el:"#app", data:{ message:{ name:"小智", sex:"男", age:24 } } , components:{ "register":model } })
一句话总结就是 子组件拿写在父组件中组件标签内的slot模板用 可以理解成组件内的html模板
父组件
<div class="father"> <child> <div slot="up"> <span>up</span> <span>up</span> <span>up</span> <span>up</span> <span>up</span> <span>up</span> </div> <div slot="down"> <span>down</span> <span>down</span> <span>down</span> <span>down</span> <span>down</span> <span>down</span> </div> </child> </div> <script> import Child from './Child.vue' export default { data: function () { return { } }, components:{ 'child': Child } } </script>
子组件
<div class="child"> <slot name="up"></slot> <slot name="down"></slot> </div>
如果想要传值可以这样(子向父html模板)
父组件
<div class="father"> <child> <div slot-scope="user"> <span v-for="item in user.data">{{item}}</span> </div> </child> </div> <script> import Child from './Child.vue' export default { data: function () { return { } },
components:{
'Child':Child
} } </script>
子组件
<slot :data="data"></slot> <script> export default { data: function(){ return { data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba'] } } } </script>
应用场景
当你要给同事封装一个列表组件,你就需要使用作用域插槽(注意是列表或者类似列表的组件)