具名插槽
// input.vue input组件
<template>
<slot name="left"></slot>
<input type="text" />
<slot name="right"></slot>
</template>
// home.vue
<template>
<input>
<div #left>我是左边的插槽</div>
<div #right>我是右边的插槽</div>
</input>
</template>
<script>
// 导入组件
import input from '@/components/input'
export default {
components: { input }
}
</script>
作用域插槽
把子组件的值传递到父组件使用
// 子组件
<template>
<slot name="header" :user='user'></slot>
</template>
<script>
export default {
data () {
return {
user: {
name: 'jack'
}
}
}
}
</script>
// 父组件
<template>
// #header='{ user }' 这里使用了es6的解构赋值
<div #header='{ user }'>
{{ user.name }}
</div>
</template>
