title: 作用域插槽 slot-scope
date: 2018-12-15 22:56:39
tags: [Vue]
categories: Vue
前言
最近发现之前学的有些知识点都忘了...还是记博客吧。
作用域插槽
一个组件中有一个插槽，我们在插槽里写一个div，那么这个div就会被渲染到这个组件里，但是这个div又想调用这个组件里的数据或方法，那怎么办呢？我们可以加一个变量，把它带进插槽中。
简单来说：作用域插槽是一个带绑定数据的插槽。
举例
// 父组件
<template>
<div id="app">
<child>
<template slot-scope="{close}"> // 解构
<!-- 插槽获得了组件的 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 方法作为一个插槽的 prop 传入 -->
<slot :close='close'></slot>
</div>
</template>
<script>
export default {
methods: {
close() {
console.log('close')
}
}
}
</script>
同理，如果插槽是一个组件呢？子组件就能拿到父组件的数据了。
所以其实这也是 Vue 中父子组件传递数据的一种方式。
