title: 作用域插槽 slot-scope
date: 2018-12-15 22:56:39
tags: [Vue]
categories: Vue
前言
最近發(fā)現(xiàn)之前學(xué)的有些知識(shí)點(diǎn)都忘了...還是記博客吧蠢络。
作用域插槽
一個(gè)組件中有一個(gè)插槽喻括，我們?cè)诓宀劾飳懸粋€(gè)div叹誉，那么這個(gè)div就會(huì)被渲染到這個(gè)組件里琐脏，但是這個(gè)div又想調(diào)用這個(gè)組件里的數(shù)據(jù)或方法量蕊，那怎么辦呢？我們可以加一個(gè)變量贞瞒，把它帶進(jìn)插槽中泪掀。
簡單來說：作用域插槽是一個(gè)帶綁定數(shù)據(jù)的插槽。
舉例
// 父組件
<template>
<div id="app">
<child>
<template slot-scope="{close}"> // 解構(gòu)
<!-- 插槽獲得了組件的 close 方法 -->
<button @click="close"></button>
</template>
</child>
</div>
</template>
<script>
import child from './child';
export default {
name: 'app',
components: {
child
}
}
</script>
//子組件
<template>
<div class="child">
<!-- 將 close 方法作為一個(gè)插槽的 prop 傳入 -->
<slot :close='close'></slot>
</div>
</template>
<script>
export default {
methods: {
close() {
console.log('close')
}
}
}
</script>
同理垃环，如果插槽是一個(gè)組件呢邀层？子組件就能拿到父組件的數(shù)據(jù)了。
所以其實(shí)這也是 Vue 中父子組件傳遞數(shù)據(jù)的一種方式遂庄。
