具名插槽
// 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>
// 導(dǎo)入組件
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的解構(gòu)賦值
<div #header='{ user }'>
{{ user.name }}
</div>
</template>
